跟我一起学extjs5(16--各种Grid列的自定义渲染)
浏览数：27 /
时间：2015年06月09日
跟我一起学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;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'
});
else
Ext.apply(field, {});
break;
default :
break;
}以过以上操作，各种类型的自定义渲染即可正确展示了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
