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等
六、批量操作
首先要设定选择的CheckboxModel组件
var selModel = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
me.down('#delete').setDisabled(selections.length === 0);
//当前grid中的删除按钮在没有选择数据时disable
}
}
});
me.selModel = selModel;批量删除按钮事件
var selections = me.getView().getSelectionModel().getSelection();
var idArr = [];
for (var i in selections){
idArr.push(selections[i].get("id"));
}
var idStr = idArr.toString();
idStr = idStr.replace(/,/g,";")
Ext.MessageBox.confirm("Confirm delete?","Do you want to delete these records?",function(btn){
if(btn == "yes"){
Ext.Ajax.request({
url: 'ctrl/delete',
params:{ids:idStr},
success: function(res){
Pactera.logger.showMsg("Delete team success.");
me.store.reload();
}
});
}
})七、以上功能的一些冲突点
分页与分组就会有冲突，暂时未想到解决方案；
分页与排序：后端分页只能让后端排序，
前端分页可以前端排序；
分组与排序：分组后的排序，默认是将每组中的数据进行排序
但是常会有这样的需求，就是根据分组后的统计数据将组进行排序，这种需求我只想到一种变通的方法，先我们用代码将数据分组，然后排序，然后我们给每条数据添加ranking字段，ranking字段既该字段所在组的排名，然后分组时将分组字段groupField设置为'ranking'，store会默认将组按分组字段排序。
慢慢完善这段时间的ExtJS学习,欢迎交流与分享！
