跟我一起学extjs5(16--各种Grid列的自己定义渲染)

跟我一起学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;
					}

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