ExtJS自定义分页参数

我有一个带有分页工具栏的Extjs网格。 我需要为在分页数据时发出的每个请求传递服务器自定义参数。 我已经尝试在store load事件中设置参数，但是当单击next按钮时，寻呼机似乎不记得上次加载store时使用的选项

下面是一些代码：

var sourceGrid = new Ext.grid.EditorGridPanel({
    region: 'center',
    title: localize.sourceView,
    store: sourceStore,
    trackMouseOver: true,
    disableSelection: false,
    loadMask: true,
    stripeRows: true,
    autoExpandColumn: "label",

    // grid columns
    columns: [
         { header: 'ID', dataIndex: 'id', width: 50, hidden: true, sortable: true },
         { header: 'Language ID', dataIndex: 'languageID', width: 50, hidden: true, sortable: true },
         { header: 'Language', dataIndex: 'language', width: 20, hidden: true, sortable: true },
         { header: 'Key ID', dataIndex: 'keyID', width: 30, hidden: true, sortable: true },
         { header: 'Key', dataIndex: 'keyValue', width: 40, sortable: true },
         { header: 'Label', dataIndex: 'label', sortable: true, editor: new Ext.form.TextField({ allowBlank: false }) },
         { header: 'Description', dataIndex: 'keyDesc', width: 30 },
         { header: 'Tool Tip', dataIndex: 'toolTip', width: 80, sortable: true, editor: new Ext.form.TextField({ allowBlank: true }) }
    ],

    // customize view config
    viewConfig: {
        forceFit: true,
        enableRowBody: true,
        showPreview: false
    },

    sm: new Ext.grid.RowSelectionModel({
        singleSelect: false,
        moveEditorOnEnter: true
    }),

    // actions buttons
    tbar: new Ext.Toolbar({
        items: [{
            text: localize.create,
            handler: function () {
                onAddLabelClick();
            }
        }, '|', {
            text: localize.deleteText,
            handler: function (tb, e) { onLabelDeleteAttempt() }
        }, '|', {
            text: localize.importFromExcel,
            handler: function (tb, e) {
                showUploadWin(getUploadLabelsForm());
            }
        }, '|', {
            id: 'export-toExcel-tbar',
            text: localize.exportToExcl,
            handler: function (tb, e) {
                onExportToExcelClick(tb);
            }
        }, '|', {
            id: 'search-label-textbox',
            xtype: 'textfield',
            width:200,
            blankText: localize.searchLabels
        }, {
            id: 'search-label-button',
            text: 'Search',
            handler: function (t, e) {

            }
        }
        ]
    }),

    // paging bar on the bottom
    bbar: new Ext.PagingToolbar({
        id: 'labelsBbr',
        pageSize: 36,
        store: sourceStore,
        displayInfo: true,
        displayMsg: localize.displayLabels,
        emptyMsg: localize.noLablesToDisplay
    }),

    // right click menu
    contextMenu: new Ext.menu.Menu({
        items: [{
            id: 'export-excel',
            text: localize.exportToExcl
        }],
        listeners: {
            itemclick: function (item) {
                switch (item.id) {
                    case 'export-excel':
                        onExportToExcelClick(item);
                        break;
                }
            }
        }
    }),

    listeners: {
        keydown: {
            scope: this,
            fn: function (e) {
                if (e.getCharCode() == 46) {
                    onLabelDeleteAttempt();
                }
            }
        },
        rowcontextmenu: function (g, ri, e) {
            var m = g.contextMenu;
            m.contextNode = g;
            m.showAt(e.getXY());
        },
        // privant default browser menu on client right click.
        render: function (grid) {
            grid.getEl().on('contextmenu', Ext.emptyFn, null, { preventDefault: true });
        }
    }
});    
var sourceStore = new Ext.data.JsonStore({
    url: hp,
    storeId: 'labels-data-store',
    idProperty: 'id',
    totalProperty: 'totalCount',
    root: 'translations',
    fields: [
        { name: 'id', type: 'string' },
        { name: 'languageID', type: 'string' },
        { name: 'language', type: 'string' },
        { name: 'keyID', type: 'string' },
        { name: 'keyValue', type: 'string' },
        { name: 'keyDesc', type: 'string' },
        { name: 'label', type: 'string' },
        { name: 'toolTip', type: 'string' }
    ],
    paramNames: {
        start:'start',
        limit:'limit',
        sort:'sort',
        dir:'dir',
        actionName:'actionName',
        lanID:'lanID'
    },
    sortInfo: {
        field: 'id',
        direction: "DESC"
    },
    // set aditional parameters for the store in this event.
    listeners: {
        'exception': function (sp, type, action, options, response, arg) {
            Ext.MessageBox.alert(localize.unKnownError, arg);
        }
    }
});
sourceStore.load({
        params: {
            start: 0,
            limit: Ext.getCmp('labelsBbr').pageSize,
            actionName: 'TranslationPaging',
            lanID: getSelectedLanguageID()
        } 
    });

我需要对服务器的每次“下一页”调用都使用

lanID

param和

actionName

param

---

可以这样做吗？

为您的商店设置

baseParams

baseParams:对象
包含以下属性的对象： 将作为参数发送给每个 HTTP请求。参数被编码 作为标准HTTP参数，使用

Ext.urlEncode

---

setBaseParam

可能是ExtJS 3.3的新版本，因此请查看您的版本中是否提供了它（如果您不是最新版本）。否则，您可以使用

store.baseParams

直接访问存储的baseParams

谢谢，我已经这样做了，但是我认为分页对象有内存来存储发送到服务器的最后一个参数。不，你必须自己处理。

Ext.PagingToolbar

仅提供UI元素并为您设置分页参数（

limit

和

start

）

/* This work for Extjs 5.0 */

bbar: Ext.create('Ext.PagingToolbar', {
                store: myStore,
                id: 'id-Paging',
                displayInfo: true,
                displayMsg: 'Displaying records {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                listeners: {
                    beforechange: function (page, currentPage) {
                        //--- Get Proxy ------//
                        var myProxy = this.store.getProxy();                        
                 //--- Define Your Parameter for send to server ----//
                        myProxy.params = {
                            MENU_NAME: '',
                            MENU_DETAIL: ''
                        };
                  //--- Set value to your parameter  ----//
                        myProxy.setExtraParam('MENU_NAME', '222222');
                        myProxy.setExtraParam('MENU_DETAIL', '555555');
                    }
                }
            })
        });

/* This work for Extjs 5.0 */

bbar: Ext.create('Ext.PagingToolbar', {
                store: myStore,
                id: 'id-Paging',
                displayInfo: true,
                displayMsg: 'Displaying records {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                listeners: {
                    beforechange: function (page, currentPage) {
                        //--- Get Proxy ------//
                        var myProxy = this.store.getProxy();                        
                 //--- Define Your Parameter for send to server ----//
                        myProxy.params = {
                            MENU_NAME: '',
                            MENU_DETAIL: ''
                        };
                  //--- Set value to your parameter  ----//
                        myProxy.setExtraParam('MENU_NAME', '222222');
                        myProxy.setExtraParam('MENU_DETAIL', '555555');
                    }
                }
            })
        });