跟我一起學extjs5(16--各種Grid列的自訂渲染)

標籤：extjs5   sencha   開發經驗   

跟我一起學extjs5(16--各種Grid列的自訂渲染)        Grid各列已經能夠展示出來了。列的類型包括字元型，整型，浮點型，貨幣型，百分比型，日期型和布爾型，我自訂了各種類型的渲染樣式：        1、整型：標題列置中，數值靠右顯示，正數顏色為藍色，負數顏色為紅色，0不顯示。        2、浮點型：標題列置中，數值靠右顯示，正數顏色為藍色，負數顏色為紅色，顯示二位小數，0不顯示。        3、貨幣型：同浮點型，但是可以選擇不同的單位，如元，千元，萬元，百萬元，億元。資料有分節顯示。        4、百分比型：自訂的一個百分比的顯示，有數值和映像來形象的表示百分比。        5、日期型：顯示格式為 Y-m-d,顏色為暗黃色。
        下面先看一下完成的結果。

        下面來產生這些欄位的自訂Renderer的函數。在app/ux/下建立檔案Renderer.js。

/** * 這裡存放了Grid的列renderer的各種自訂的方法 */Ext.onReady(function() {// 可以製作一個控制項，來修改這二個屬性，達到可以修改金額單位的目的Ext.monetaryText = '萬'; // 加在數字後面的金額單位Ext.monetaryUnit = 10000;// Ext.monetary = '億';// Ext.monetaryUnit = 10000*10000;if (Ext.util && Ext.util.Format) {Ext.apply(Ext.util.Format, {// 金額欄位monetaryRenderer : function(val) {if (val) {if (Ext.monetaryUnit && Ext.monetaryUnit != 1)val = val / Ext.monetaryUnit;// 正數用藍色顯示，負數用紅色顯示return '<span style="color:' + (val > 0 ? 'blue' : 'red')+ ';float:right;">' + Ext.util.Format.number(val, '0,000.00')+ Ext.monetaryText + '</span>';} elsereturn ''; // 如果為0,則不顯示},// 日期dateRenderer : function(val) {return '<span style="color:#a40;">'+ Ext.util.Format.date(val, 'Y-m-d') + '</span>';},// 整型變數floatRenderer : function(val, rd, model, row, col, store, gridview) {return '<span style="color:' + (val > 0 ? 'blue' : 'red')+ ';float:right;">' + (val == 0 ? '' : val) + '</span>';},// 整型變數intRenderer : function(val, rd, model, row, col, store, gridview) {return '<span style="color:' + (val > 0 ? 'blue' : 'red')+ ';float:right;">' + (val == 0 ? '' : val) + '</span>';},// 百分比percentRenderer : function(v, rd, model) {v = v * 100;var v1 = v > 100 ? 100 : v;v1 = v1 < 0 ? 0 : v1;var v2 = parseInt(v1 * 2.55).toString(16);if (v2.length == 1)v2 = '0' + v2;return Ext.String.format('<div>'+ '<div style="float:left;border:1px solid #008000;height:15px;width:100%;">'+ '<div style="float:left;text-align:center;width:100%;color:blue;">{0}%</div>'+ '<div style="background: #FAB2{2};width:{1}%;height:13px;"></div>'+ '</div></div>', v, v1, v2);},// 對模組的namefields欄位加粗顯示nameFieldRenderer : function(val, rd, model, row, col, store, gridview) {return ('<strong>' + val + '</strong>');}})};});

        這個檔案在調用的時候不能用uses或者requires來加入，需要在html中引入。在extjs5中，可以直接修改/war/下的app.json和bootstrap.json來入。首先開啟app.json,找到  “js“的字義處，首先加入國際化的中文包，然後再加入Renderer.js。加好後如下：

    "js": [        {            "path": "app.js",            "bundle": true        } , {        "path": "ext/packages/ext-locale/build/ext-locale-zh_CN.js"        } , {        "path": "app/ux/Renderer.js"        }    ],

       開啟bootstrap.json，這個檔案很大，開啟後先進行格式化，然後移動的檔案最後，加入上面二個js檔案。（如果這一步不想手工操作，你可以用 ‘sencha app build‘ 命令來自動產生最新的bootstrap.json）。

        修改好上面二個json的設定檔以後，需要在ColumnFactory.js中加入對應的渲染方式。下面只列出了該檔案中的部分代碼：

switch (fd.tf_fieldType) {case 'Date' :Ext.apply(field, {xtype : 'datecolumn',align : 'center',width : 100,formatter : 'dateRenderer', // 定義在Ext.util.Format中的渲染函數可以用這種方法調用editor : { // 如果需要行內修改，需要加入此屬性xtype : 'datefield',format : 'Y-m-d',editable : false}});break;case 'Datetime' :Ext.apply(field, {xtype : 'datecolumn',align : 'center',width : 130,formatter : 'dateRenderer'});break;case 'Boolean' :field.xtype = 'checkcolumn';field.stopSelection = false;field.processEvent = function(type) { // 加入這一句，可以防止點中修改if (type == 'click')return false;};break;case 'Integer' :Ext.apply(field, {align : 'center',xtype : 'numbercolumn',tdCls : 'intcolor',format : '#',formatter : 'intRenderer',editor : {xtype : 'numberfield'}});break;case 'Double' :Ext.apply(field, {align : 'center',xtype : 'numbercolumn',width : 110,// renderer : Ext.util.Format.monetary, //這種方法和下面的方法是一樣的formatter : fd.tf_isMoney // 判斷是否是金額類型的? 'monetaryRenderer': 'floatRenderer', // 這種方法也可以editor : {xtype : 'numberfield'}});break;case 'Float' :Ext.apply(field, {align : 'center',xtype : 'numbercolumn',width : 110,formatter : 'floatRenderer' // 這種方法也可以});break;case 'Percent' :Ext.apply(field, {align : 'center',formatter : 'percentRenderer',// xtype : 'widgetcolumn', // 這裡注釋掉的是extjs5內建的百分比類型的顯示方法// widget : {// xtype : 'progressbarwidget',// textTpl : ['{percent:number("0.00")}%']// },editor : {xtype : 'numberfield',step : 0.01},width : 110  // 預設寬度})break;case 'String' :  // 如果這個欄位是此模組的nameFields則加粗顯示if (module.get('tf_nameFields') == fd.tf_fieldName)Ext.apply(field, {text : '<strong>' + fd.tf_title + '</strong>',formatter : 'nameFieldRenderer'});elseExt.apply(field, {});break;default :break;}

        以過以上操作，各種類型的自訂渲染即可正確展示了。