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 ：对象
包含属性的对象将作为每个参数发送 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() );

对于ExtJS 3.3，

setBaseParam可能是新的，所以请查看它是否在您的版本中可用（如果您不是最新的）。否则，您可以使用store.baseParams直接访问商店的baseParams。

Answer 2

/* 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');
                    }
                }
            })
        });

ExtJS自定义分页参数

2 个答案: