在 ExtJS 6 仪表板中动态更改列宽答案

【问题标题】：Dynamically change column widths in ExtJS 6 dashboards在 ExtJS 6 仪表板中动态更改列宽
【发布时间】：2016-01-20 22:47:50
【问题描述】：

有没有办法在 Ext.dashboard.Dashboard 呈现后更改其列宽？它是使用以下配置值创建的：

columnWidths: [
    0.35,
    0.40,
    0.25
]

我想动态改成：

columnWidths: [
    0.5,
    0.25,
    0.25
]

直接更改columnWidths 属性或使用setConfig 不会更新仪表板。它似乎没有“刷新”的方法或任何其他明显服务于相同目的的方法。各个仪表板列有一个 setWidth 函数，但这似乎也没有任何作用。

【问题讨论】：

在什么情况下你想改变列宽？屏幕调整大小时要更改吗？
我的用例实际上是一个带有“将所有列设置为相等宽度”之类的预设菜单，因此用户可以快速均衡或对齐所有列和/或小部件。

标签： javascript extjs extjs6

【解决方案1】：

我在 API 中找不到任何自动管理此问题的内容，但您可以手动更新仪表板中每个子组件的 columnWidth 值，然后调用 updateLayout：

function setColumnWidths(dashboard, columnWidths){
    var i = 0;
    dashboard.items.each(function(item){
        if(item instanceof Ext.resizer.Splitter)
            return; // ignore
        item.columnWidth = columnWidths[i++] || 1;
    });
    dashboard.updateLayout();
}

» Fiddle

【讨论】：