ExtJS 自定义分页参数

Question

我有一个带有分页工具栏的 Extjs Grid。
我需要为我在分页数据时发出的每个请求传递服务器自定义参数。
我尝试在商店加载事件中设置参数，但似乎寻呼机不记得单击下一个按钮时用于加载商店的最后一个选项。

这是一些代码:

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参数和 actionName参数。

可以做到吗？

Answer 1

设置 baseParams为您的商店。

baseParams : Object
An object containing properties which are to be sent as parameters for every HTTP request. Parameters are encoded as standard HTTP parameters using Ext.urlEncode.

var sourceStore = new Ext.data.JsonStore({
    // your configs
    baseParams: {
        actionName: 'TranslationPaging',
        lanID: getSelectedLanguageID()
    }
});

// After initialization, to change the baseParams, use:
sourceStore.setBaseParam( 'lanID', getSelectedLanguageID() );

setBaseParam ExtJS 3.3 可能是新的，所以看看它是否在你的版本中可用(如果你不是最新的)。否则，您可以直接使用 store.baseParams 访问商店的 baseParams .