ExtJS自制表格Grid分页条

  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     },