extjs 渲染之前的方法_15、手把手教你Extjs5（十五）各种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 '' + Ext.util.Format.number(val, '0,000.00')+ Ext.monetaryText + '';

}else

return ''; //如果为0,则不显示

},//日期

dateRenderer: function(val) {return ''

+ Ext.util.Format.date(val, 'Y-m-d') + '';

},//整型变量

floatRenderer: function(val, rd, model, row, col, store, gridview) {return '' + (val == 0 ? '' : val) + '';

},//整型变量

intRenderer: function(val, rd, model, row, col, store, gridview) {return '' + (val == 0 ? '' : val) + '';

},//百分比

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;returnExt.String

.format('

'

+ '

'

+ '

{0}%

'

+ '

+ '

', v, v1, v2);

},//对模块的namefields字段加粗显示

nameFieldRenderer: function(val, rd, model, row, col, store, gridview) {return ('' + val + '');

}

})

};

});

这个文件在调用的时候不能用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:'' + fd.tf_title + '',

formatter:'nameFieldRenderer'});elseExt.apply(field, {});break;default:break;

}

以过以上操作，各种类型的自定义渲染即可正确展示了。