最近来到一家新的公司, 目前还是比较忙的, 要学习的东西很多很多.  在这里把自己学到的东西记下来, 也作一个分享.

    最近在做一个后台的项目,后台程序框架使用的是ZendFrameWork,UI框架使用的就是Ext JS4. 其实目前网络上比较多的还是Ext 3的资料,  关于Ext 4的还真不多. 所以在探索的过程中我是吃够了苦头. 

    其实我也是第一次使用JS的MVC,  初期看到它还是比较晕的, 不过做多了, 找到规律了, 也就好 了.  我这里要讲的东西呢. 就是关于分页的东西, 不知道大家有没有使用过Ext 4的分页组件. 我就试过, 如果有搜索的功能, 那么搜索的时候, 搜索条件是有带上的; 但是, 当你点击下一页, 或到某一页的时候, 搜索的条件就会没有的.  针对上述问题, 我这面提供一种解决办法. 希望对更多的朋友能提供帮助, 下面会贴上相关代码.

    分页嘛, 先上一个store的:

 
  
  1. Ext.define('AdminExt.store.Order', { 
  2.     extend: 'Ext.data.Store', 
  3.     autoLoad: false, 
  4.     model: 'AdminExt.model.Order', 
  5.     storeId: 'Order_id', 
  6.     pageSize: 20, 
  7.     proxy: { 
  8.         type: 'ajax', 
  9.         url: '/order/index', 
  10.         reader: { 
  11.             type: 'json', 
  12.             root: 'items', 
  13.             totalProperty: 'total' 
  14.         } 
  15.     }    
  16. }); 
 
  
     那么它是通过ajax的方式从服务器获取数据,  服务器端的代码我就不贴了..  数据是以JSON的格式发送到客户端的. 主数据在items里面, 下面的totalProperty是记录的条数, 它是与分页的计算相关的.
 
  
     那么第二个就是它的View了,  因为这里和controler 没什么关系, 我就不贴代码了.
 
  
 
 
  
 
  
  1. Ext.define('AdminExt.view.order.Orderview',{ 
  2.     extend: 'Ext.grid.Panel', 
  3.     alias: 'widget.orderOrderview', 
  4.     id: 'Orderview_id', 
  5.     store:  'Order', 
  6.     border: 0, 
  7.     layout: 'vbox', 
  8.     stateful: true, 
  9.     columns: [ 
  10.         {header: '订单ID',dataIndex: 'ORDER_ID', width: 90, align: 'center'}, 
  11.         {header: '用户(ID)',dataIndex: 'USER_INFO', width: 90, align: 'center'}, 
  12.         {header: '下单时间',dataIndex: 'ORDER_TIME', width: 90, align: 'center'}, 
  13.         {header: '支付时间',dataIndex: 'PAY_TIME', width: 90, align: 'center'}, 
  14.         {header: '订单金额',dataIndex: 'ORDER_AMOUNT', width: 90, align: 'center'}, 
  15.         {header: '订单描述',dataIndex: 'ORDER_DESC', width: 90, align: 'center'}, 
  16.         {header: '订单状态',dataIndex: 'ORDER_STATUS',width:90,align:'center' }, 
  17. ], 
  18.      
  19.     bbar: { 
  20.         xtype: 'pagingtoolbar', //这个就是分页相关的工具条 
  21.         store: 'Order', 
  22.         displayInfo: true 
  23.     }, 
  24.     tbar: [{ 
  25.         xtype: 'buttongroup', 
  26.         width: '100%', 
  27.         columns: 6, 
  28.         items: [{ 
  29.             xtype: 'textfield', 
  30.             fieldLabel: '订单ID', 
  31.             labelWidth: 45,   
  32.             width: 190, 
  33.             id: 'only_order_id' 
  34.         },{ 
  35.             xtype: 'textfield', 
  36.             fieldLabel: '用户ID', 
  37.             labelWidth: 45, 
  38.             width: 190, 
  39.             id: 'only_user_id' 
  40.         },{ 
  41.             xtype: 'datefield', 
  42.             fieldLabel: '下单时间', 
  43.             labelWidth: 60, 
  44.             id: 'order_time_s', 
  45.             width: 210, 
  46.             format: 'Y-m-d' 
  47.         },{ 
  48.             xtype: 'datefield', 
  49.             fieldLabel: '至', 
  50.             width: 170, 
  51.             labelWidth: 10, 
  52.             id: 'order_time_e', 
  53.             format: 'Y-m-d' 
  54.         },{ 
  55.             xtype: 'datefield', 
  56.             fieldLabel: '支付时间', 
  57.             labelWidth: 60, 
  58.             id: 'pay_time_s', 
  59.             width: 210, 
  60.             format: 'Y-m-d' 
  61.         },{ 
  62.             xtype: 'datefield', 
  63.             fieldLabel: '至', 
  64.             width: 170, 
  65.             labelWidth: 10, 
  66.             id: 'pay_time_e', 
  67.             format: 'Y-m-d' 
  68.         },{ 
  69.             xtype: 'combobox', 
  70.             fieldLabel:'订单状态', 
  71.             id:'select_status', 
  72.             width: 210, 
  73.             labelWidth:60, 
  74.             store : Ext.create('Ext.data.Store',{ 
  75.                 fields : ['name','value'], 
  76.                 data : [{'name':'已创建','value':0},{'name':'同步通知成功','value':2}, {'name':'已支付', 'value': 1}, {'name':'争议期内', 'value':3},{'name': '补单', 'value': 4}, {'name':'已退款', 'value':5}, {'name': '测试单', 'value': 6}] 
  77.             }), 
  78.             emptyText : '请选择状态', 
  79.             displayField : 'name', 
  80.             valueField : 'value' 
  81.         },{ 
  82.             xtype: 'button', 
  83.             text: '搜索', 
  84.             id: 'searchorder', 
  85.             icon: '/public/js/lib/Ext/resources/icons/search.png', 
  86.             listeners:{ 
  87.                 click: { 
  88.                     fn: function(){ 
  89.                         order_id = Ext.getCmp('only_order_id').getValue(); 
  90.                         only_user_id = Ext.getCmp('only_user_id').getValue(); 
  91.                         order_time_s = Ext.getCmp('order_time_s').getValue(); 
  92.                         order_time_e = Ext.getCmp('order_time_e').getValue(); 
  93.                         pay_time_s = Ext.getCmp('pay_time_s').getValue(); 
  94.                         pay_time_e = Ext.getCmp('pay_time_e').getValue(); 
  95.                         select_status = Ext.getCmp('select_status').getValue(); 
  96.                         loader = { 
  97.                                 params : {} 
  98.                         }; 
  99.                         if (order_id) { 
  100.                             loader.params.order_id = order_id; 
  101.                         } 
  102.                         if (only_user_id) { 
  103.                             loader.params.only_user_id = only_user_id; 
  104.                         } 
  105.                         if (order_time_s) { 
  106.                             loader.params.order_time_s = order_time_s.getFullYear() + '-' + (order_time_s.getMonth() + 1) + '-' + order_time_s.getDate(); 
  107.                         } 
  108.                         if (order_time_e) { 
  109.                             loader.params.order_time_e = order_time_e.getFullYear() + '-' + (order_time_e.getMonth() + 1) + '-' + order_time_e.getDate(); 
  110.                         } 
  111.                         if (pay_time_s) { 
  112.                             loader.params.pay_time_s = pay_time_s.getFullYear() + '-' + (pay_time_s.getMonth() + 1) + '-' + pay_time_s.getDate(); 
  113.                         } 
  114.                         if (pay_time_e) { 
  115.                             loader.params.pay_time_e = pay_time_e.getFullYear() + '-' + (pay_time_e.getMonth() + 1) + '-' + pay_time_e.getDate(); 
  116.                         } 
  117.                         if (select_status) { 
  118.                             loader.params.select_status = select_status; 
  119.                         } 
  120. this.up('grid').getStore().load(loader); //将参数加载给store 
  121.                     } 
  122.                 } 
  123.             } 
  124.         }] 
  125.     }], 
  126.     listeners: { 
  127.         viewready: function(grid) { 
  128.             order_id = Ext.getCmp('only_order_id').getValue(); 
  129.             only_user_id = Ext.getCmp('only_user_id').getValue(); 
  130.             order_time_s = Ext.getCmp('order_time_s').getValue(); 
  131.             order_time_e = Ext.getCmp('order_time_e').getValue(); 
  132.             pay_time_s = Ext.getCmp('pay_time_s').getValue(); 
  133.             pay_time_e = Ext.getCmp('pay_time_e').getValue(); 
  134.             select_status = Ext.getCmp('select_status').getValue(); 
  135.             loader = { 
  136.                     params : {} 
  137.             }; 
  138.             if (order_id) { 
  139.                 loader.params.order_id = order_id; 
  140.             } 
  141.             if (only_user_id) { 
  142.                 loader.params.only_user_id = only_user_id; 
  143.             } 
  144.             if (order_time_s) { 
  145.                 loader.params.order_time_s = order_time_s.getFullYear() + '-' + (order_time_s.getMonth() + 1) + '-' + order_time_s.getDate(); 
  146.             } 
  147.             if (order_time_e) { 
  148.                 loader.params.order_time_e = order_time_e.getFullYear() + '-' + (order_time_e.getMonth() + 1) + '-' + order_time_e.getDate(); 
  149.             } 
  150.             if (pay_time_s) { 
  151.                 loader.params.pay_time_s = pay_time_s.getFullYear() + '-' + (pay_time_s.getMonth() + 1) + '-' + pay_time_s.getDate(); 
  152.             } 
  153.             if (pay_time_e) { 
  154.                 loader.params.pay_time_e = pay_time_e.getFullYear() + '-' + (pay_time_e.getMonth() + 1) + '-' + pay_time_e.getDate(); 
  155.             } 
  156.             if (select_status) { 
  157.                 loader.params.select_status = select_status; 
  158.             } 
  159. //下面的是关键, 在EXT 4中 使用store的on方法给beforeload提供参数, 这样就能保证, 搜索分页的有效性. 
  160.             grid.getStore().on('beforeload', function (store, options) { 
  161.                 loader.params.page = options.page; 
  162.                 loader.params.start = options.start; 
  163.                 loader.params.limit = options.limit; 
  164.                 Ext.apply(store.proxy.extraParams, loader.params); 
  165.             }); 
  166.         } 
  167.     } 
  168.  });  
 
  
上面最关键的代码我也用注释加起来了.    希望能够给各位朋友们提供帮助.  欢迎回复. - -