Ext js 4用pagingtoolbar实现搜索分页

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

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

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

    分页嘛, 先上一个store的:

Ext.define('AdminExt.store.Order', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    model: 'AdminExt.model.Order',
    storeId: 'Order_id',
    pageSize: 20,
    proxy: {
        type: 'ajax',
        url: '/order/index',
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
        }
    }
});

     那么它是通过ajax的方式从服务器获取数据,  服务器端的代码我就不贴了..  数据是以JSON的格式发送到客户端的. 主数据在items里面, 下面的totalProperty是记录的条数, 它是与分页的计算相关的.

     那么第二个就是它的View了,  因为这里和controler 没什么关系, 我就不贴代码了.

 

Ext.define('AdminExt.view.order.Orderview',{
    extend: 'Ext.grid.Panel',
    alias: 'widget.orderOrderview',
    id: 'Orderview_id',
    store:  'Order',
    border: 0,
    layout: 'vbox',
    stateful: true,
    columns: [
        {header: '订单ID',dataIndex: 'ORDER_ID', width: 90, align: 'center'},
        {header: '用户(ID)',dataIndex: 'USER_INFO', width: 90, align: 'center'},
        {header: '下单时间',dataIndex: 'ORDER_TIME', width: 90, align: 'center'},
        {header: '支付时间',dataIndex: 'PAY_TIME', width: 90, align: 'center'},
        {header: '订单金额',dataIndex: 'ORDER_AMOUNT', width: 90, align: 'center'},
        {header: '订单描述',dataIndex: 'ORDER_DESC', width: 90, align: 'center'},
        {header: '订单状态',dataIndex: 'ORDER_STATUS',width:90,align:'center' },
],

    bbar: {
        xtype: 'pagingtoolbar', //这个就是分页相关的工具条
        store: 'Order',
        displayInfo: true
    },
    tbar: [{
        xtype: 'buttongroup',
        width: '100%',
        columns: 6,
        items: [{
            xtype: 'textfield',
            fieldLabel: '订单ID',
            labelWidth: 45,
            width: 190,
            id: 'only_order_id'
        },{
            xtype: 'textfield',
            fieldLabel: '用户ID',
            labelWidth: 45,
            width: 190,
            id: 'only_user_id'
        },{
            xtype: 'datefield',
            fieldLabel: '下单时间',
            labelWidth: 60,
            id: 'order_time_s',
            width: 210,
            format: 'Y-m-d'
        },{
            xtype: 'datefield',
            fieldLabel: '至',
            width: 170,
            labelWidth: 10,
            id: 'order_time_e',
            format: 'Y-m-d'
        },{
            xtype: 'datefield',
            fieldLabel: '支付时间',
            labelWidth: 60,
            id: 'pay_time_s',
            width: 210,
            format: 'Y-m-d'
        },{
            xtype: 'datefield',
            fieldLabel: '至',
            width: 170,
            labelWidth: 10,
            id: 'pay_time_e',
            format: 'Y-m-d'
        },{
            xtype: 'combobox',
            fieldLabel:'订单状态',
            id:'select_status',
            width: 210,
            labelWidth:60,
            store : Ext.create('Ext.data.Store',{
                fields : ['name','value'],
                data : [{'name':'已创建','value':0},{'name':'同步通知成功','value':2}, {'name':'已支付', 'value': 1}, {'name':'争议期内', 'value':3},{'name': '补单', 'value': 4}, {'name':'已退款', 'value':5}, {'name': '测试单', 'value': 6}]
            }),
            emptyText : '请选择状态',
            displayField : 'name',
            valueField : 'value'
        },{
            xtype: 'button',
            text: '搜索',
            id: 'searchorder',
            icon: '/public/js/lib/Ext/resources/icons/search.png',
            listeners:{
                click: {
                    fn: function(){
                        order_id = Ext.getCmp('only_order_id').getValue();
                        only_user_id = Ext.getCmp('only_user_id').getValue();
                        order_time_s = Ext.getCmp('order_time_s').getValue();
                        order_time_e = Ext.getCmp('order_time_e').getValue();
                        pay_time_s = Ext.getCmp('pay_time_s').getValue();
                        pay_time_e = Ext.getCmp('pay_time_e').getValue();
                        select_status = Ext.getCmp('select_status').getValue();
                        loader = {
                                params : {}
                        };
                        if (order_id) {
                            loader.params.order_id = order_id;
                        }
                        if (only_user_id) {
                            loader.params.only_user_id = only_user_id;
                        }
                        if (order_time_s) {
                            loader.params.order_time_s = order_time_s.getFullYear() + '-' + (order_time_s.getMonth() + 1) + '-' + order_time_s.getDate();
                        }
                        if (order_time_e) {
                            loader.params.order_time_e = order_time_e.getFullYear() + '-' + (order_time_e.getMonth() + 1) + '-' + order_time_e.getDate();
                        }
                        if (pay_time_s) {
                            loader.params.pay_time_s = pay_time_s.getFullYear() + '-' + (pay_time_s.getMonth() + 1) + '-' + pay_time_s.getDate();
                        }
                        if (pay_time_e) {
                            loader.params.pay_time_e = pay_time_e.getFullYear() + '-' + (pay_time_e.getMonth() + 1) + '-' + pay_time_e.getDate();
                        }
                        if (select_status) {
                            loader.params.select_status = select_status;
                        }
this.up('grid').getStore().load(loader); //将参数加载给store
                    }
                }
            }
        }]
    }],
    listeners: {
        viewready: function(grid) {
            order_id = Ext.getCmp('only_order_id').getValue();
            only_user_id = Ext.getCmp('only_user_id').getValue();
            order_time_s = Ext.getCmp('order_time_s').getValue();
            order_time_e = Ext.getCmp('order_time_e').getValue();
            pay_time_s = Ext.getCmp('pay_time_s').getValue();
            pay_time_e = Ext.getCmp('pay_time_e').getValue();
            select_status = Ext.getCmp('select_status').getValue();
            loader = {
                    params : {}
            };
            if (order_id) {
                loader.params.order_id = order_id;
            }
            if (only_user_id) {
                loader.params.only_user_id = only_user_id;
            }
            if (order_time_s) {
                loader.params.order_time_s = order_time_s.getFullYear() + '-' + (order_time_s.getMonth() + 1) + '-' + order_time_s.getDate();
            }
            if (order_time_e) {
                loader.params.order_time_e = order_time_e.getFullYear() + '-' + (order_time_e.getMonth() + 1) + '-' + order_time_e.getDate();
            }
            if (pay_time_s) {
                loader.params.pay_time_s = pay_time_s.getFullYear() + '-' + (pay_time_s.getMonth() + 1) + '-' + pay_time_s.getDate();
            }
            if (pay_time_e) {
                loader.params.pay_time_e = pay_time_e.getFullYear() + '-' + (pay_time_e.getMonth() + 1) + '-' + pay_time_e.getDate();
            }
            if (select_status) {
                loader.params.select_status = select_status;
            }
//下面的是关键, 在EXT 4中 使用store的on方法给beforeload提供参数, 这样就能保证, 搜索分页的有效性.
            grid.getStore().on('beforeload', function (store, options) {
                loader.params.page = options.page;
                loader.params.start = options.start;
                loader.params.limit = options.limit;
                Ext.apply(store.proxy.extraParams, loader.params);
            });
        }
    }
 });

上面最关键的代码我也用注释加起来了.    希望能够给各位朋友们提供帮助.  欢迎回复. - -