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()
        } 
    });

我需要对服务器的每个"下一页"调用具有lanIDparam和actionNameparam.

可以吗？

Answer 1

baseParams为您的商店设置.

baseParams:Object
包含要作为每个HTTP请求的参数发送的属性的对象.参数使用编码为标准HTTP参数 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的新功能,所以请查看它是否适用于您的版本(如果您不是最新的).否则,您可以直接访问商店的baseParams store.baseParams.