试过Grid自带的load和分页功能，没有成功，干脆就自己写了......
主要是查询条件比较复杂......
希望哪位大神能有更好的意见。
1 Ext.define(‘MyApp.ux.Pagination‘, {
2 extend: ‘Ext.Toolbar‘,
3 // 调用时用此名称
4 alias: ‘Pagination‘,
5 autoDestroy : true,
6 items : [‘->‘,{
7 // 用于记录查询条件
8 xtype : ‘displayfield‘,
9 itemId : ‘objInPagination‘,
10 hidden : true,
11 },{
12 // 总页数记录
13 xtype : ‘numberfield‘,
14 itemId : ‘totalInPagination‘,
15 hideTrigger : true,
16 allowDecimals : false,
17 allowBlank : false,
18 hidden : true,
19 value : 0 ,
20 listeners : {
21 // 值改变时修改总页数显示
22 change : function(newValue, oldValue, eOpts){
23 var toolbar = this.up(‘toolbar‘);
24 var pageInPagination = toolbar.down(‘#pageInPagination‘);
25 var value = this.getRawValue().toString();
26 pageInPagination.setMaxValue(parseInt(value));
27 var displayfieldInPagination = toolbar.down(‘#displayfieldInPagination‘);
28 displayfieldInPagination.setValue(‘/共‘ + value +‘页‘);
29 }
30 }
31 },{
32 // 每页条数
33 xtype : ‘numberfield‘,
34 itemId : ‘limitInPagination‘,
35 hideTrigger : true,
36 hidden : true,
37 allowDecimals : false,
38 allowBlank : false,
39 value : 10
40 },{
41 text : ‘上一页‘,
42 handler : function(btn){
43 var toolbar = btn.up(‘toolbar‘);
44 var pageInPagination = toolbar.down(‘#pageInPagination‘);
45 var page = pageInPagination.getValue() - 1;
46 pageInPagination.setValue(page);
47 var GoInPagination = toolbar.down(‘#GoInPagination‘);
48 GoInPagination.handler(GoInPagination);
49 }
50 },{
51 // 当前页数
52 xtype : ‘numberfield‘,
53 itemId : ‘pageInPagination‘,
54 hideTrigger : true,
55 allowDecimals : false,
56 minValue : 1,
57 allowBlank : false,
58 value : 1 ,
59 maxValue : 0,
60 width : 30
61 },{
62 // 总页数显示
63 xtype : ‘displayfield‘,
64 itemId : ‘displayfieldInPagination‘,
65 value : ‘/共0页‘,
66 },{
67 text : ‘下一页‘,
68 handler : function(btn){
69 var toolbar = btn.up(‘toolbar‘);
70 var pageInPagination = toolbar.down(‘#pageInPagination‘);
71 var page = pageInPagination.getValue() + 1;
72 pageInPagination.setValue(page);
73 var GoInPagination = toolbar.down(‘#GoInPagination‘);
74 GoInPagination.handler(GoInPagination);
75 }
76 },{
77 text : ‘Go‘,
78 itemId : ‘GoInPagination‘,
79 handler : function(btn){
80 var toolbar = btn.up(‘toolbar‘);
81 var pageInPagination = toolbar.down(‘#pageInPagination‘);
82 var Grid = btn.up(‘grid‘);
83 if(pageInPagination.isValid()){
84 var objHttpParams = toolbar.down(‘#objInPagination‘).getValue();
85 var obj = {};
86 obj.limit = toolbar.down(‘#limitInPagination‘).getValue();
87 obj.page = toolbar.down(‘#pageInPagination‘).getValue();
88 var tools = Ext.create(‘MyApp.Tools‘);
89 var httpParams = tools.objectToHttpOgnlParams(obj,null,3) + ‘&‘ + objHttpParams;
90 Grid.search(httpParams);
91 }else{
92 // 页码不正确时清空表格内容，当前页数为0
93 Grid.getStore().removeAll();
94 pageInPagination.setValue(0);
95 }
96 }
97 }],
98 doSearch : function(limit,total,obj){
99 this.down(‘#limitInPagination‘).setValue(limit);
100 this.down(‘#totalInPagination‘).setValue(total);
101 this.down(‘#pageInPagination‘).setValue(1);
102 var tools = Ext.create(‘MyApp.Tools‘);
103 var objHttpParams = tools.objectToHttpOgnlParams(obj,null,3);
104 this.down(‘#objInPagination‘).setValue(objHttpParams);
105 var GoInPagination = this.down(‘#GoInPagination‘);
106 GoInPagination.handler(GoInPagination)
107 }
108 });
表格中的调用
1 /**
2 *
3 */
4 Ext.define(‘MyApp.view.dict.operator.OperatorGrid‘, {
5 extend : ‘Ext.grid.Panel‘,
6 requires : [‘MyApp.store.Operator‘],
7 xtype : ‘OperatorGrid‘,
8 store : Ext.create(‘MyApp.store.Operator‘),
9 // 分页条，bbar是在底部，tbar是在顶端
10 bbar : Ext.create(‘MyApp.ux.Pagination‘),
11 columns : [{
12 text : ‘账号‘,
13 dataIndex : ‘user‘,
14 width : ‘14%‘
15 },{
16 text : ‘姓名‘,
17 dataIndex : ‘name‘,
18 width : ‘14%‘
19 }, {
20 text : ‘部门‘,
21 dataIndex : ‘department‘,
22 width : ‘14%‘,
23 renderer : function(department) {
24 return department.name;
25 }
26 },{
27 text : ‘手机‘,
28 dataIndex : ‘mobile‘,
29 width : ‘14%‘
30 }, {
31 text : ‘座机‘,
32 dataIndex : ‘telphoneSet‘,
33 width : ‘14%‘
34 }, {
35 text : ‘邮箱‘,
36 dataIndex : ‘email‘,
37 width : ‘14%‘
38 } , {
39 text : ‘备注‘,
40 dataIndex : ‘remark‘,
41 width : ‘16%‘
42 } ],
43 title : ‘人员列表‘,
44 search : function(httpParams){
45 // 与action交互，执行查询，httpParams是已定义好转码好的查询条件
46 var operatorSearchForm = Ext.ComponentQuery.query(‘#OperatorSearchForm‘)[0];
47 operatorSearchForm.submit({
48 url : ‘operatorSearchWithPage.action‘,
49 params : httpParams,
50 method : ‘post‘,
51 waitMsg:‘稍安勿躁...‘,
52 success : function(basicForm, action) {
53 // 执行查询成功后的操作
54 var operatorGrid = Ext.ComponentQuery.query(‘#OperatorGridInSearchForm‘)[0];
55 if (operatorGrid) {
56 operatorGrid.setStore(Ext.create(‘MyApp.store.Operator‘, {
57 data : action.result.operators
58 }));
59 }
60 },
61 failure : function() {
62 Ext.Msg.alert(‘悲剧‘, ‘查询操作失败，请重试‘);
63 }
64 });
65 }
66 });
查询按钮被点击时
1 onClickSearchButton : function(btn) {//点击“查询”按钮执行
2 // 获取查询条件
3 var operatorSearchForm = btn.up(‘form‘);
4 var obj = operatorSearchForm.getViewModel().getData();
5 //查询条件obj转码
6 var tools = Ext.create(‘MyApp.Tools‘);
7 var httpParams = tools.objectToHttpOgnlParams(obj,null,3);
8 operatorSearchForm.submit({//获取查询结果总条数
9 url : ‘operatorCount.action‘,
10 params : httpParams,
11 method : ‘post‘,
12 waitMsg:‘稍安勿躁...‘,
13 success : function(basicForm, action) {
14 //每页条数
15 var limit = 10;
16 //总页数（查询总记录数除以每页条数，向上取整）
17 var total = Math.ceil(action.result.total/limit);
18 // 找到对应显示的表格
19 var OperatorGridInSearchForm = Ext.ComponentQuery.query(‘#OperatorGridInSearchForm‘)[0];
20 //找到表格下的分页条
21 var toolbar = OperatorGridInSearchForm.down(‘toolbar‘);
22 //执行查询
23 toolbar.doSearch(limit,total,obj);
24 },
25 failure : function() {
26 Ext.Msg.alert(‘悲剧‘, ‘查询操作失败，请重试‘);
27 }
28 });
29 },
最终效果
时间： 2024-08-28 03:18:02