ExtJS GridPannel的使用

Extjs GridPanel

Grid是在客户端上显示大量的表格数据的极佳方式。它本质上是一个超级统计表

GridPanel使其更容易地进行获取、排序和筛选大量的数据。

Grid是由两个主要部分组成的 - 一个含有全部数据的Store和一个要进行渲染列的集合。

//创建grid 也就是表格组件
me.__mainGrid = Ext.create("Ext.grid.Panel", {
viewConfig : {
enableTextSelection : true
},
border : 0,
columnLines : true,
columns : [{
//默认情况下Extjs GridPanel是不显示行号的，
//Ext.grid.RowNumberer为一个辅助类，它可以传递到Ext.grid.column.Column中作为column列配置项，
//并作为一个可以自动生成数字，为每行提供编号的列。xtype : "rownumberer",相当于实例RowNumberer
//xtype为列指定类型
xtype : "rownumberer",
text :"序号",
width : 40
}, {
//header通过设置false来阻止Panel的标题头被创建与渲染，默认为undefined。
//通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头。
header : "物流单号",
dataIndex : "tracking_no",
width : 60,
//设置为true则禁用列菜单,默认false
menuDisabled : true,
//是否排序
sortable : false
}],
//store指明数据来源
store : store,
tbar : [{
id : "pagingToobar",
xtype : "pagingtoolbar",//意为Ext.toobar.Paging,是专用的分页工具栏，绑定数据{@ link Ext.data.Store}并提供自动分页控制
border : 0,
store : store
}, "-", {
xtype : "displayfield",
value : myproject.Message.Each_page_show
}, {
id : "comboCountPerPage",
//ComboBox就像是传统的HTML文本 <input> 域和 <select> 域的综合； 用户可以自由的在域中键入，或从下拉选择列表中选择值
xtype : "combobox",
//不可编辑
editable : false,
width : 60,
//创建一个数组store
store : Ext.create("Ext.data.ArrayStore", {
fields : ["text"],
data : [["20"], ["50"], ["100"],
["300"], ["1000"]]
}),
value : 20,
listeners : {
change : {
fn : function() {
store.pageSize = Ext
//Ext.getCmp( String id)返回的是Ext.Component对象。也就是在js代码中定义的对象
.getCmp("comboCountPerPage")
.getValue();
store.currentPage = 1;
Ext.getCmp("pagingToobar")
.doRefresh();
},
scope : me
}
}
}, {
xtype : "displayfield",
value : myproject.Message.Item_Record
}],
listeners : {
select : {
fn : me.onMainGridSelect,
scope : me
},
itemdblclick : {
fn : me.onEditBill,
scope : me
}
}
});
return me.__mainGrid;

里面的store 数据仓库我们还没有定义,继续

//创建store
var store = Ext.create("Ext.data.Store", {
//Model类modelName，创建modelName类的数据仓库，
//store 使用了ajax代理，通过url向服务器请求数据，方式为post
//ajax代理的reader 配置项是告诉程序以何种方式读取请求到的数据。
autoLoad : false,
model : modelName,
data : [],
pageSize : 20,
//代理（proxy）是用来加载和存取Model 数据的
proxy : {
type : "ajax",
actionMethods : {
read : "POST"
},
url : PSI.Const.BASE_URL + "Home/Purchase/wbillList",
reader : {
root : 'dataList',
totalProperty : 'totalCount'
}
}
});
//addListener的简写方法
//向本对象添加一个事件处理函数
store.on("beforeload", function() {
store.proxy.extraParams = me.getQueryParam();
});
//由于设置了autoLoad为false,所以要手动为load函数写回调方法
store.on("load", function(e, records, successful) {
if (successful) {
me.gotoMainGridRecord(me.__lastId);
}
});

接着创建module

//定义Model
Ext.define(modelName, {
extend : "Ext.data.Model",
//对应数据库表
fields : ["id", "tracking_no",]
});

这样我们就完成了,详细的解释都在代码块中,

中文4.X文档地址:http://extjs-doc-cn.github.io/ext4api/