标签：
Ext.PagingToolbar,Ext.data.Store,Ext.data.HttpProxy,Ext.data.JsonReader,Ext.grid.GridPanel
在这里讲一下ExtJs下的一套分页步骤以及涉及到的Ext控件.
因为引入了Json作为数据传输格式,所以这里需要通过Http获得我们想要的数据:
proxy: new Ext.data.HttpProxy ( { //url:‘/Ajax/getEmpList.ashx‘ url: ‘/FX_LOG_QZ_T/getList‘ } ),
Note:创建HttpProxy的同时,用url这个参数指定获取数据的路径.
竟然传输的数据是Json,顺理成章的就应该换成能解析Json的Reader:
//解析Json reader: new Ext.data.JsonReader ( { totalProperty: ‘totalProperty‘, root: ‘data‘, //主键 id: ‘JSON_pid‘, //表格显示字段列 fields: [ ‘JSON_pid‘, ‘JSON_no_ick‘, ‘JSON_no_machine‘ ] } ),
那么一个完整的Ext.data.Store如下:
var storeMain = new Ext.data.Store ( { //表示从哪里获得数据 proxy: new Ext.data.HttpProxy ( { //url:‘/Ajax/getEmpList.ashx‘ url: ‘/FX_LOG_QZ_T/getList‘ } ), //解析Json reader: new Ext.data.JsonReader ( { totalProperty: ‘totalProperty‘, root: ‘data‘, //主键 id: ‘JSON_pid‘, //表格显示字段列 fields: [ ‘JSON_pid‘, ‘JSON_no_ick‘, ‘JSON_no_machine‘ ] } ), remoteSort: true } );
Note:remoteSort指示远程排序(后台排序)
准备好数据源之后,接下来写我们的Ext分页工具条:
var pageSize = 20; var pagingToolbar = new Ext.PagingToolbar ({ emptyMsg: "没有数据", displayInfo: true, displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据", store: storeMain, pageSize: pageSize });
Note:如果配置了分页工具条,store.load()就必须在构造Grid之后执行,否则分页工具条将不起作用
完整的Ext.grid.GridPanel如下:
grid = new Ext.grid.GridPanel ( { renderTo: ‘grid‘, height: 680, width: 1240, cm: colModel, //行列 store: storeMain, //数据源 trackMouseOver: true, //鼠标特效 loadMask: true, autoShow: true, autoScroll: true, bbar: pagingToolbar, } )
最后,在初始化时通过传参数去获取希望得到的分页数据:
//加载数据 storeMain.load({ params: { start: 0, limit: pageSize } });
查询参数
一般我们查询出一个具有分页功能的表格数据之后,还会需要根据用户的输入根据这个条件进行条件查询,那么用Ext可以这么实现:
首先在Ext.grid.GridPanel加入一个顶部的工具条:
//头部 tbar: [ ‘姓名‘, { xtype: ‘textfield‘, width: 120, id: ‘username‘, name: ‘username‘ } { text: ‘搜索‘, iconCls: ‘search‘, handler: SerachGrid }, { xtype: ‘tbseparator‘ } ]
SerachGrid函数中重新加载数据,并且将参数加到params中
function SerachGrid() { username = Ext.get(‘username‘).dom.value; storeMain.reload ( { params: { start: 0, limit: pageSize, username: username } } ) }
Ext.PagingToolbar翻页时查询参数丢失的处理
在测试数据足够分两页的情况下,我们会发现,上面的代码中存在一个问题,就是带条件查询的情况下,我们并不能如意得到翻页的数据,因为翻页时会发生查询参数丢失,查询
的数据不再是带条件的数据,为了处理这个问题,我们可以监听beforeload:
在Ext3中使用的方法是：
store.on(‘beforeload‘,function(){
store.baseParams = {type:type_combo.getValue()};
});
在Ext4中，应该改成：
store.on("beforeload",function(){
Ext.apply(store.proxy.extraParams, {type:type_combo.getValue()});
});
比如子啊Ext3中,代码如下:
storeMain.on(‘beforeload‘, function () { storeMain.baseParams = { username: username }; });
END
标签：
原文地址：http://www.cnblogs.com/Francis-YZR/p/4896123.html
