在我的ExtJS网格中,我使用以下代码来声明bbar:
Ext.define('Ext.toolbar.PagingComboToolbar', {
extend: 'Ext.PagingToolbar',
resources: {
displayMessage: Resources.Labels.Ext_Paging_DisplayMsg,
emptyMessage: Resources.Labels.Ext_Paging_EmptyMsg
},
displayInfo: true,
enableOverflow: true,
pageSize: 50,
initComponent: function () {
var me = this;
this.store.pageSize = this.pageSize;
var combo = new Ext.form.ComboBox({
name: 'perpage',
width: 75,
store: new Ext.data.ArrayStore({
fields: ['id'],
data: [
['10'],
['20'],
['50'],
['75'],
['100'],
['150']
]
}),
value: this.pageSize,
listWidth: 70,
triggerAction: 'all',
displayField: 'id',
valueField: 'id',
editable: false,
forceSelection: true,
listeners: {
select: {
fn: function (combo, record) {
var newPagesize = parseInt(record.get('id'), 10);
this.pageSize = newPagesize;
this.store.pageSize = newPagesize;
this.store.loadPage(this.store.currentPage);
},
scope: this
}
}
});
Ext.apply(this, {
displayMsg: this.resources.displayMessage,
emptyMsg: this.resources.emptyMessage,
items: [
combo
]
});
this.callParent(arguments);
}
});
为了完整起见,以下是我在网格定义中声明此类的方式:
bbar: Ext.create('Ext.toolbar.PagingComboToolbar', {
store: store,
enableOverflow: true,
}),
请注意,这里最需要注意的是我附加到分页机制的组合框。它允许您动态定义页面的大小。当网格不处于溢出模式时,这种方法非常有效(我找不到更好的方法来描述它)。
只要我缩小网格,就会出现.x-tooolbar-more-icon:fore图标,单击该图标后,组合框将显示在小菜单中。我仍然可以看到选项(10,20,50,…),我可以点击它们,但select事件不再被触发。如果我决定在任何给定点再次加宽网格(宽度足以在网格中显示组合框,而不是隐藏在"更多"按钮后面),则选择事件会突然再次出现,一切都会再次完美工作。
话虽如此,原来的(开箱即用)按钮仍然可以继续工作。例如,如果刷新页面按钮也出现在菜单中,则单击该按钮实际上会刷新网格。
这是一个显示问题的Fiddle。如果你摆弄网格的宽度,你将能够重现问题(例如400像素)
有什么想法吗?
看起来这是一个常见的错误,在早期版本中也发生过:https://www.sencha.com/forum/showthread.php?308363
作为一种解决方法,您可以使用change
事件而不是select
。检查你修改的Fiddle。