Renderer解析和使用正则

Renderer解析和使用正则

 

一.Renderer解析：

 

1.理解：

      renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子。

 

2.方法参数说明：

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
     。。。。。。。
     。。。。。
     。。。
}

(1).value：是当前单元格的值。
(2).cellmeta：保存的是cellId单元格id和css，id是列号，css是这个单元格的css样式。
(3).record：是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
(4).rowIndex：行号，不是从头往下数的意思，而是计算了分页以后的结果。
(5).columnIndex：列号。
(6).store：这个是构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用。

 

参考：http://www.cnblogs.com/ljian/archive/2011/10/27/2226959.html

 

 

二.Renderer中使用正则：

 

1.创建Record（如有日期，要进行格式化！）

var myRecord = new Ext.data.Record.create([
	{name:"id",type:"int"},
	{name:"salary",type:"float"},
	{name:"createDate",type:"date",dateFormat:"Y-m-d"},//日期格式化
]);

 

2.创建Store：

var myProxy = new Ext.data.HttpProxy({url:"......"});

var myReader = new Ext.data.JsonReader({
	root:'rows',
	totalProperty:'totalCount'     //若有分页则必须有该项
},myRecord);   //注意此处有Record

var myStore = new Ext.data.Store({  
    proxy:myProxy,
    reader:myReader
});

 

3.创建ColumnModel：

var mySm = new Ext.grid.CheckboxSelectionModel();   //表格中的复选框
var myCm = new Ext.grid.ColumnModel({
	defaultSortable:false,
	columns:[
		mySm,
		{
			header:"编号",
			dataIndex:"id",
			hidden:true,
			width:50
		},{
			header:"薪水",
			dataIndex:"salary",
			menuDisabled:true,         //不在隐藏列显示
			width:50,
			renderer:function(value,cell,record){
				return regMoney(value,cell,record);   //金钱的千分位正则
			}
		},{
			header:"日期",
			dataIndex:"salary",
			menuDisabled:true,
			align: 'left',       //左对齐
			css:"color:black;font-size:12px;",
			width:50,
			renderer:function(value,cell,record){
				if(v==null||v==""){
					return "";
				}else{
					return regDate(value,cell,record);   //日期正则
				}
			}
		}
	]
});

 

4.创建GridPanel：

var myGrid = new Ext.grid.EditorGridPanel({
	layout:"fit",
	sm:mySm,
	cm:myCm,
	ds:myStore,
	clicksToEdit:1,
	stripeRows:true,
	loadMask:{msg:'正在加载数据，请稍侯……'},
	tbar:[
		{
			text:"保存",
			iconCls:"save",
			handler:save
		},{
			text:"增加行",
			iconCls:"add",
			handler:add
		},{
			text:"删除行",
			iconCls:"remove",
			handler:remove
		},"-",{
			xtype:"label",
			text:"金额单位：(元)",
			style:'padding-left:10px;color:red;'
		}
	],
	bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: myStore,
        displayInfo: true,
        displayMsg: '当前显示 {0} - {1} ，共{2}条记录',
        emptyMsg: "没有数据",
        items: ['-']
    })
});

 

5.正则的方法：

/*金额千分位*/
function regMoney(v, p, r) {
	v = (Math.round((v - 0) * 1000000)) / 1000000;
	v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v
			+ "0" : v);
	v = String(v);
	var ps = v.split('.');
	var whole = ps[0];
	var sub = ps[1] ? '.' + ps[1] : '.00';
	var r = /(\d+)(\d{3})/;
	while (r.test(whole)) {
		whole = whole.replace(r, '$1' + ',' + '$2');
	}
	v = whole + sub;
	//p.attr = 'title=' + v;// 增加属性
	if (v.charAt(0) == '-') {
		return '-' + v.substr(1);
	}
	return v;
}

/*日期格式化*/
function regDate(v, p, r) {
	if(v==""){
		return "";
	}
	var date = new Date(v);
	return date.format('Y-m-d');                   
}

 

图示：