ExtJS自定义分页参数 [英] ExtJS custom Paging parameters
本文介绍了ExtJS自定义分页参数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要传递服务器自定义参数为我在分页数据时的每个请求。
我已经尝试在商店加载事件中设置参数，但是当点击下一个按钮时，似乎寻呼机不记得用于加载商店的最后一个选项。
这是一些代码：
var sourceGrid = new Ext.grid.EditorGridPanel（{
region： 'center'，
title：localize.sourceView，
store：sourceStore，
trackMouseOver：true，
disableSelection：false，
loadMask：true，
stripeRows：true，
autoExpandColumn：label，
//网格列
列：[
{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：tr ue，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}）}
]，
/ / custom view config
viewConfig：{
forceFit：true，
enableRowBody：true，
showPreview：false
}，
sm：新的Ext.grid.RowSelectionModel（{
singleSelect：false，
moveEditorOnEnter：true
}），
//动作按钮
tbar：new Ext .Toolbar（{
items：[{
text：localize.create，
handler：function（）{
onAddLabelClic K（）;
}
}，'|'，{
文本：localize.deleteText，
处理程序：函数（tb，e）{onLabelDeleteAttempt（）}
} |'，{
text：localize.importFromExcel，
handler：function（tb，e）{
showUploadWin（getUploadLabelsForm（））;
}
}，'|'，{
id：'export-toExcel-tbar'，
文本：localize.exportToExcl，
处理程序：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） {
}
}
]
}），
//底部的分页栏
bbar：new Ext .PagingToolbar（{
id：'labelsBbr'，
pageSize：36，
store：sourceStore，
displayInfo：true，
displayMsg：localize.displayLabels，
emptyMsg：localize.noLablesToDisplay
}），
//右键菜单
contextMenu：新的Ext.menu.Menu（{
items：[{
id：'export-excel'，
text：localize.exportToExcl
}]，
listeners：{
itemc lick：function（item）{
switch（item.id）{
case'export-excel'：
onExportToExcelClick（item）;
break;
}
}
}
}），
监听器：{
keydown：{
范围：这个，
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默认浏览器菜单右键单击。
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： language_id'，type：'string'}，
{name：'language'，type：'string'}，
{name：'keyID'，type：'string'}，
{name：'keyValue'，type：'string'}，
{name：'keyDesc'，type：'string'}，
{name：'label'，type：'string'}，
{name：'toolTip'，键入：'string'}
]，
paramNames：{
start：'start'，
limit：'limit'
sort：'sort'，
dir：'dir'，
actionName：'actionName'，
lanID：'lanID'
}，
sortInfo ：{
field：'id'，
方向：DESC
}，
//在此事件中设置商店的附加参数
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 param和 actionName param。
可以完成吗？
解决方案
为您的商店设置 baseParams
baseParams ：对象
包含
的属性的对象作为每个
HTTP请求的参数发送。参数使用
Ext.urlEncode编码
作为标准HTTP参数。
var sourceStore = new Ext.data.JsonStore（{
// your configs
baseParams：{
actionName：'TranslationPaging' ，
lanID：getSelectedLanguageID（）
}
}）;
//初始化后，要更改baseParams，请使用：
sourceStore.setBaseParam（'lanID'，getSelectedLanguageID（））;
setBaseParam 可能是ExtJS 3.3的新增功能，所以看看你的版本是否可用（如果你不是最新的）。否则，您可以直接使用 store.baseParams 访问商店的baseParams。
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.
Here is some 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 for each "Next Page" call to the server to have the lanID param and the actionName param.
Can it be done?
解决方案
Set the baseParams for your store.
baseParams : Object
An object containing properties which are to be sent as parameters for every HTTP request. Parameters are encoded as standard HTTP parameters usingExt.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'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屋！
查看全文
