ExtJS custom paging options

Question

I have an Extjs grid with a paging panel. I need to pass user server parameters for each request that I make when swapping data. I tried to set the parameters in the storage load event, but it seems that the pager does not remember the last parameters used to load the storage when the next button is clicked.

Here is the code:

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

I need each next page call to the server to have a lanID parameter and an actionName parameter.

Can this be done?

Answer 1

Install baseParams for your store.

baseParams: Object
An object containing the properties that should be sent as parameters for each 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 may be new with ExtJS 3.3, so see if it is available in your version (if you are not updating). Otherwise, you can directly access the database database using store.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'); } } }) });