Grid是ExtJS中最常用的组件之一，今天在此稍作整理，主要针对一些常用的功能知识点。

一、基础的Grid表格

Ext.create(‘Ext.data.Store‘, {
    storeId:‘simpsonsStore‘,
    fields:[‘name‘, ‘email‘, ‘phone‘],
    data:{‘items‘:[
        { ‘name‘: ‘Lisa‘,  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { ‘name‘: ‘Bart‘,  "email":"bart@simpsons.com",  "phone":"555-222-1234" }
    ]},
    proxy: {
        type: ‘memory‘,
        reader: {
            type: ‘json‘,
            root: ‘items‘
        }
    }
});

Ext.create(‘Ext.grid.Panel‘, {
    title: ‘Simpsons‘,
    store: Ext.data.StoreManager.lookup(‘simpsonsStore‘),
    columns: [
        { text: ‘Name‘,  dataIndex: ‘name‘ },
        { text: ‘Email‘, dataIndex: ‘email‘, flex: 1 },
        { text: ‘Phone‘, dataIndex: ‘phone‘ }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

以上是ExtJS官网的基础例子，最主要的两个参数，一个是store，用来管理grid的数据；还有个是columns，用来管理grid的结构。

store又可以分作加载本地数据和向服务器请求数据两种。

二、Grid的分页

    分页可以分为两种方法，后台分页与前端分页。顾名思义，后台分页是指，前台向后台请求第N页的数据，后台只组织第N页数据返回给前端显示；前端分页是指前端向后台请求所有数据返回给前端，然后前端根据分页参数来显示当前页码的数据。

this.bbar = new Ext.PagingToolbar({
	emptyMsg:"没有数据",
    displayInfo:true,
    displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
    store:store,
    pageSize:itemsPerPage
});

不管前端分页和后端分页，最好在Grid中都配置好bbar属性，bbar是用于显示分页数据的工具条。

(1)、后台分页

new Ext.data.Store({
    autoLoad:  {start:0, limit:itemsPerPage} ,
    model: ‘Pactera.model.Job‘,
    pageSize: itemsPerPage, //每页的页数
    proxy: {
        type: ‘ajax‘,
	url : ‘ctrl/job/‘ + this.action,
	reader: {
	    type: ‘json‘,
            root: ‘data‘,
	    totalProperty: ‘total‘
	}
    }
})

{
    "data": [
        //返回的数据数组
    ],
    "total": 6,//数据总数，是
}

后端分页还有点很重要，该表格数据的查询参数的设置

//每次加载前，配置查询条件参数
thisStore.on(‘beforeload‘,function(thiz,options){
    thiz.proxy.extraParams = baseParams; //baseParams是每次查询的条件参数
});

(2)、前端分页

new Ext.data.Store({
	autoLoad:  {start:0, limit:itemsPerPage} ,
	model: ‘Pactera.model.TPLProductivity‘,
	pageSize: itemsPerPage,
	proxy: Ext.create(‘Ext.ux.data.PagingMemoryProxy‘,{data:me.allData})
});

前端分页只需把data数据直接加载到Ext.ux.data.PagingMemoryProxy插件即可，当然保证ExtJS中有此插件。

三、Grid的多字段排序

store.sort([{
    property: ‘score‘,
    direction: ‘DESC‘ //第一优先级 倒序
},{
    property: ‘total_count‘,
    direction: ‘ASC‘  //第二优先级 正序
}]);

排序也分情况，grid中的head默认点击就会排序，但仅限于单字段排序，当需要多字段排序时就需要store的sort方法。

在有分页的情况下默认排序情况又不一样，后端分页的时候默认排序只会排显示的一页的数据，而前端分页时默认排序也能完成所有的排序，但是我所用的4.2版本还是存在一些问题和瑕疵的。

四、Grid的分组

//分组统计组件
var grouping = Ext.create(‘Ext.grid.feature.GroupingSummary‘,{
    id: ‘group‘,
    //分组行的自定义数据显示
    groupHeaderTpl:[
	    ‘NO.{name}  {children:this.formatName}‘,
	    {
	        formatName: function(children) {
	            return children[0].data["showName"];
	        }
	    }
	],
    
    hideGroupedHeader: false,
    enableGroupingMenu: true,
    startCollapsed:true
});

me.features = [grouping,
{
    ftype: ‘summary‘, //grid总计插件
    dock:‘top‘
}];

注意：以上的features中加载了两个插件，第一个是进行分组，并对分组进行统计；第二个是对grid进行总体统计。统计数据代码如下：

{header: ‘Client‘, dataIndex: ‘clientName‘,width:180,locked:true,
    summaryType: ‘count‘,//count指总计个数，还有sum、max、min、average
    summaryRenderer: function(value, summaryData, dataIndex) {
	if(value == arguments[5].store.data.length){
   		return "Total:";
	}else{
		return "";
	}
}}

groupField: ‘ranking‘,//分组字段，该字段相同才会分到同一组，该字段配置到store中

五、Grid的编辑

var rowEditing = Ext.create(‘Ext.grid.plugin.RowEditing‘, {
    clicksToEdit: 1//点击几次进行编辑
})
this.plugins = [rowEditing];

出了RowEditing和有CellEditing，当然还要配置columns，例子如下：

{header: ‘Column Name‘, dataIndex: ‘displayName‘,align:‘center‘,
editor:{
	xtype:‘textfield‘,
	allowBlank:false
}}

编辑方式出了最简单的textfield，还有combobox、numberfield、checkbox等

六、以上功能的一些冲突点

分页与分组就会有冲突，暂时未想到解决方案；

分页与排序：后端分页只能让后端排序，

                        前端分页可以前端排序；

分组与排序：分组后的排序，默认是将每组中的数据进行排序

    但是常会有这样的需求，就是根据分组后的统计数据将组进行排序，这种需求我只想到一种变通的方法，先我们用代码将数据分组，然后排序，然后我们给每条数据添加ranking字段，ranking字段既该字段所在组的排名，然后分组时将分组字段groupField设置为‘ranking‘，store会默认将组按分组字段排序。

慢慢完善这段时间的ExtJS学习,欢迎交流与分享！

本文出自 “雪飘七月” 博客，请务必保留此出处http://xuepiaoqiyue.blog.51cto.com/4391594/1440033

ExtJS（2）- Grid技巧