ExtJS 6 网格没有 update/refresh 列 headers 正确
ExtJS 6 grid doesn't update/refresh column headers properly
我有一个基本的 ExtJS 网格面板,我可以在上面动态应用自定义状态。使用另一个控件(例如组合框或另一个网格),我的应用程序在网格上应用选定状态。这种状态的一个例子:
{
"height": 384,
"columns": [{
"id": "h107"
},
{
"id": "h1",
"width": 30
},
{
"id": "unplannedtasks_ActualEndDate",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualNoResources",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualResponseDateTime",
"hidden": true
},
{
"id": "unplannedtasks_ActualTotalDurationInSeconds",
"width": 100
},
"filters": []
}
这是网格声明的相应列部分:
Ext.define('Ext.grid.Stateful', {
extend: 'Ext.grid.Panel',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'hiddenchange', 'groupchange', 'show', 'hide'],
// CODE OMMITTED FOR BREVITY
initComponent: function () {
Ext.apply(this, {
columns: [
filterAction,
new columns.tasks.ActualEndDate({ id: 'unplannedtasks_ActualEndDate', hidden: false }),
new columns.tasks.ActualNoResources({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualResponseDateTime({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualTotalDurationInSeconds({ id: 'unplannedtasks_ActualTotalDurationInSeconds', hidden: false }
]
});
}
})
列定义示例:
Ext.define("columns.tasks.ActualNoResources", {
extend: "Ext.grid.column.Column",
text: 'ActualNoResources',
dataIndex: 'ActualNoResources',
editor: {
allowBlank: false
}, filterable: true,
filter: {
type: 'string'
}
});
除了 headers 列似乎没有正确刷新外,一切都如我所料。如果我打开网格中的列面板,它会显示正确数量的可见列和隐藏列。与过滤器相同的故事:如果状态中有过滤器,它将在正确的字段上应用正确的值。就好像 headers 列需要以某种方式刷新。
我尝试使用 grid.getView().refresh() 但这不起作用。相反,如果我调整网格大小,它会刷新隐藏的列,但不会刷新最初隐藏但现在可见的列。
我想我缺少属于网格的 applyState 方法的一行简单代码,因此我可以命令网格使用新状态而不是先前或初始状态刷新网格。
关于如何解决这个问题有什么想法吗?
事实证明,ExtJS 不可能开箱即用地实现我追求的场景。我要问的只能在启动期间完成(无需开发人员自定义代码的干预)所以我不得不放弃这种方法并提供自定义代码。最后,我不得不重建列,然后将该集合传递给网格的 reconfigure(store, columns) 方法。
我有一个基本的 ExtJS 网格面板,我可以在上面动态应用自定义状态。使用另一个控件(例如组合框或另一个网格),我的应用程序在网格上应用选定状态。这种状态的一个例子:
{
"height": 384,
"columns": [{
"id": "h107"
},
{
"id": "h1",
"width": 30
},
{
"id": "unplannedtasks_ActualEndDate",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualNoResources",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualResponseDateTime",
"hidden": true
},
{
"id": "unplannedtasks_ActualTotalDurationInSeconds",
"width": 100
},
"filters": []
}
这是网格声明的相应列部分:
Ext.define('Ext.grid.Stateful', {
extend: 'Ext.grid.Panel',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'hiddenchange', 'groupchange', 'show', 'hide'],
// CODE OMMITTED FOR BREVITY
initComponent: function () {
Ext.apply(this, {
columns: [
filterAction,
new columns.tasks.ActualEndDate({ id: 'unplannedtasks_ActualEndDate', hidden: false }),
new columns.tasks.ActualNoResources({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualResponseDateTime({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualTotalDurationInSeconds({ id: 'unplannedtasks_ActualTotalDurationInSeconds', hidden: false }
]
});
}
})
列定义示例:
Ext.define("columns.tasks.ActualNoResources", {
extend: "Ext.grid.column.Column",
text: 'ActualNoResources',
dataIndex: 'ActualNoResources',
editor: {
allowBlank: false
}, filterable: true,
filter: {
type: 'string'
}
});
除了 headers 列似乎没有正确刷新外,一切都如我所料。如果我打开网格中的列面板,它会显示正确数量的可见列和隐藏列。与过滤器相同的故事:如果状态中有过滤器,它将在正确的字段上应用正确的值。就好像 headers 列需要以某种方式刷新。
我尝试使用 grid.getView().refresh() 但这不起作用。相反,如果我调整网格大小,它会刷新隐藏的列,但不会刷新最初隐藏但现在可见的列。
我想我缺少属于网格的 applyState 方法的一行简单代码,因此我可以命令网格使用新状态而不是先前或初始状态刷新网格。
关于如何解决这个问题有什么想法吗?
事实证明,ExtJS 不可能开箱即用地实现我追求的场景。我要问的只能在启动期间完成(无需开发人员自定义代码的干预)所以我不得不放弃这种方法并提供自定义代码。最后,我不得不重建列,然后将该集合传递给网格的 reconfigure(store, columns) 方法。