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');                   
}

 

图示:

  
 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值