跟我一起学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>'; } else return ''; // 假设为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;100%;">' + '<div style="float:left;text-align:center;100%;color:blue;">{0}%</div>' + '<div style="background: #FAB2{2};{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' }); else Ext.apply(field, {}); break; default : break; }
以过以上操作,各种类型的自己定义渲染就可以正确展示了。