ExtJS 自定义分页参数 [英] ExtJS custom Paging parameters
问题描述
我有一个带有分页工具栏的 Extjs 网格.我需要为分页数据时发出的每个请求传递服务器自定义参数.我已经尝试在商店加载事件中设置参数，但似乎寻呼机不记得单击下一个按钮时用于加载商店的最后一个选项.
I have an Extjs Grid with a Paging toolbar. I need to pass the server custom parameters for each request I make when paging the data. I have tried setting the params in the store load event , but it seems the pager does not remember the last options used for loading the store when the next button is clicked.
这里有一些代码:
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 参数.
I need for each "Next Page" call to the server to have the lanID param and the actionName param.
可以吗?
推荐答案
为您的商店设置 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() );
setBaseParam 可能是 ExtJS 3.3 的新功能，因此请查看它是否在您的版本中可用(如果您不是最新的).否则，您可以使用 store.baseParams 直接访问商店的 baseParams.
setBaseParam may be new with ExtJS 3.3, so see if it's available in your version (if you're not up to date). Otherwise you can access the store's baseParams directly with store.baseParams.
这篇关于ExtJS 自定义分页参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
