我有一个Ext.grid.plugin.RowWidget的网格。调整网格大小时,扩展的行主体组件保持原始宽度。我如何解决这个问题?
作为临时解决方案,我添加了resize
事件处理程序,如下所示
listeners: {
resize: function (grid) {
Ext.each(grid.query('characterPanel'), function (rowBodyComponent) {
//if(rowBodyComponent.isVisible()) does not work
//rowBodyComponent.updateLayout(); does not work
rowBodyComponent.setWidth('100%');
});
}
}
但对我来说这似乎是不好的解决方案。此外,它有一个问题 - 所有行主体组件调整其可见性的重新调整,如果许多折叠(展开后)行可能会影响我的应用程序的性能。
有什么想法吗?
以下simple fiddle说明了我的问题以及我已经尝试过的问题。
答案 0 :(得分:1)
为插件添加ID:
{
ptype: 'rowwidget',
id: 'rowwidget',
widget: {
xtype: 'characterPanel',
bind: {},
}
}
然后你可以通过给定的id来获取插件:
grid.getPlugin('rowwidget');
此插件包含一个名为 recordsExpanded 的属性。 这包含扩展记录的所有 internalIds 以及扩展的当前状态。
在你的onResize函数中你可以这样做:
let plugin = grid.getPlugin('rowwidget');
if (plugin && plugin.recordsExpanded) {
for (let internalId in plugin.recordsExpanded) {
let record = grid.store.getByInternalId(internalId);
if (!Ext.isEmpty(record)) {
plugin.getWidget(grid.getView(), record).setWidth('100%');
}
}
}
但是你应该在函数调用中添加一个延迟(至少为1)以确保调整大小。
listeners: {
resize: {
delay: 1,
fn: function() {
// do stuff
}
}
}
没有延迟,小部件有时在行变大后不会调整大小。
答案 1 :(得分:0)
要添加到@xhadon的answer,您还可以使用reference
执行以下操作。这样一来,您将无需检查该插件是否存在或是否已扩展,因为它将是undefined
并且该函数将返回。
listen: {
component: {
'#my-grid': {
resize: 'onResize'
}
}
},
onResize: function() {
const me = this,
rowWidget = me.getView().lookup('rowWidget');
if (! rowWidget) {
return
}
rowWidget.setWidth('100%');
}
plugins: {
rowwidget: {
widget: {
xtype: 'myrowwidget',
reference: 'rowWidget',
bind: {
store: '{record.children}'
}
}
}
}