ExtJs4之Grid配置信息

var temporaryAttendanceGrid;
	Ext.onReady(function(){
		
	var store = Ext.create('Ext.data.Store',{
		id:'store',
		fields:["UUID","NAME","TEACHERID","COURSE_START_TIME","COURSE_END_TIME","BARCODE",
				"MODIFIER"],
		pageSize : 25, //每页显示条数
		proxy:{
			type: 'ajax',
			limitParam:'pageSize', // 每页显示条数
			pageParam:'pageNo',    // 那一页
			url : '${basePath}temporaryattendance/temporaryattendance!temporaryAttendanceLoad.json',
            reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
                type: 'json', //返回数据类型为json格式
                rootProperty: 'TemporaryAttendance.result',  //数据
                totalProperty: 'TemporaryAttendance.totalCount' //数据总条数
            }
		},
		autoLoad:true
	});

	//store.getProxy().extraParams = {'pageSize':1};
		
	temporaryAttendanceGrid = Ext.create('Ext.grid.Panel',{
			id:'TemporaryAttendanceGrid',
			//title:'临时考勤信息',
			store:store,
			region : 'center',
			//border:true,
			columnLines: true,
			loadMask: true,
			height : '60%',	
			selModel: { selType: 'checkboxmodel' },   //选择框
			tbar:[
		             {text:'新增',iconCls:'create',handler:showAlert},"-",
		             {text:'修改',iconCls:'modify',handler:showAlert},"-",
		             {text:'删除',iconCls:'remove',handler:showAlert},"-",
		             {text:"搜索",iconCls:"search",handler:showAlert}],
			columns:[
			        {dataIndex : 'UUID', text:'主键',hidden:true},
					{dataIndex : 'NAME', text:'名称',width:120},
					{dataIndex : 'TEACHERID', text:'任课老师id',width:120},
					{dataIndex : 'COURSE_START_TIME', text:'上课开始时间',maxWidth:200},
					{dataIndex : 'COURSE_END_TIME', text:'上课结束时间',maxWidth:200},
					{dataIndex : 'BARCODE', text:'签到码',width:120},
					{dataIndex : 'CREATOR', text:'创建者',width:120},
					{dataIndex : 'MODIFIER', text:'修改者',hidden:true},
					{dataIndex : 'CREATE_TIME', text:'创建时间',width:120},
					{dataIndex : 'MODIFY_TIME', text:'修改时间',hidden:true}],
			 bbar: [{
	                xtype: 'pagingtoolbar',
	                store: store,
	                displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
	                emptyMsg: "没有数据",
	                beforePageText: "当前页",
	                afterPageText: "共{0}页",
	                displayInfo: true                 
	            }]
		});
		
		Ext.create('Ext.container.Viewport', {
			layout : 'border',
			//renderTo:Ext.getBody(),
			style : 'background-color: #f5f5f5;',
			items : [temporaryAttendanceGrid]
		});
		
	});
	
	
	function showAlert (){
	      var selectedData = temporaryAttendanceGrid.getSelectionModel().getSelection()[0].data;

	      Ext.MessageBox.alert("标题",selectedData.cataId);
	 }

一、gridPanel几个必须配置的项：store（数据格式组织、存储），columns(展示到页面的格式，数据组织)。

      1、store里面有个fields配置，为需要的数据字段，跟读取到的数据（本地，或远程获取的）字段对应。

      2、columns中的text为grid展示的列标题，dataIndex绑定字段与store中fields配置字段的对应。

数据获取

var store = Ext.create('Ext.data.Store',{
		id:'store',
		fields:["UUID","NAME","TEACHERID","COURSE_START_TIME","COURSE_END_TIME","BARCODE",
				"MODIFIER"],
		pageSize : 25, //每页显示条数
		proxy:{
			type: 'ajax',
			limitParam:'pageSize', // 每页显示条数
			pageParam:'pageNo',    // 那一页
			url : '${basePath}temporaryattendance/temporaryattendance!temporaryAttendanceLoad.json',
            reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
                type: 'json', //返回数据类型为json格式
                rootProperty: 'TemporaryAttendance.result',  //数据
                totalProperty: 'TemporaryAttendance.totalCount' //数据总条数
            }
		},
		autoLoad:true
	});

四、选中行

       1、选中行点击事件


  listeners: { 'itemclick': function (view, record, item, index, e) {
               Ext.MessageBox.alert("标题",record.data.cataId);
            }
       2、外部操作选中行       


 function showAlert (){
             var selectedData=grid.getSelectionModel().getSelection()[0].data;
             Ext.MessageBox.alert("标题",selectedData.cataId);
         }
       3、外部操作多行选中


  var rows = grid.getView().getSelectionModel().getSelection();
                var msg = "";
                for (var i = 0; i < rows.length; i++) {
                    msg = msg + rows[i].get('cataId') + ',';
                }

五、列数据格式

  1、时间

{ text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
     2、金钱


{ text: '订单金额', dataIndex: 'oprice',align:'right', xtype:'numbercolumn',format:'0,000.00'},
     3、多字段组合


复制代码
   { text: '毛利率', dataIndex: 'sPrice', minWidth: 20,
                                renderer: function(v, m, r){
                                var puprsaleprice = r.get("sPrice") * r.get("puprsalepricetax")/(1+r.get("puprsalepricetax"));
                                var puprtaxprice = r.get("cPrice") * r.get("puprtax")/(1+r.get("puprtax")); 
                                //var maoprice = (r.get("sprice") - r.get("cprice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sprice") * r.get("fpoint"))/r.get("sprice");    
                                var maoprice = (r.get("sPrice") - r.get("cPrice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sPrice") * r.get("fpoint"))/(r.get("sPrice") / (1+r.get("puprsalepricetax")));                
                                return (maoprice * 100).toFixed(2) + '%';
                            }},
复制代码

六、Grid数据刷新

  1、不传参刷新当前数据

store.load();
     2、传参刷新数据


store.load({ params: { Id: 123} });