如何在运行时在 ExtJs columnLayout 中设置 columWidth 配置？

Question

我有一个面板，里面有一些项目，它的初始布局是列，每个项目都有 columnWidth: 1 但现在在按钮单击事件上我想将每个项目的 columnWidth 设置为 0.5 .这应该是容器的 50%。

我试过：

{
    xtype: 'panel',
    fieldLabel: 'Name',
    vertical: true,
    layout: 'column',
    items: [
        {
        xtype: 'button', 
        id:'btn1', 
        width: 80,
        text: 'Button1', 
        columnWidth:1
        },{
        xtype: 'button', 
        id:'btn2', 
        width: 80, 
        text: 'Button2', 
        columnWidth:.2
        }
    ]
}

按钮点击代码：

Ext.getCmp('btn2').setConfig({columnWidth: '1'});

但这不起作用请帮助我。

Answer 1

首先，你不能columnWidth: 1。来自 documentation:

The columnWidth property is always evaluated as a percentage and must be a decimal value greater than 0 and less than 1 (e.g., .25).

要动态更新您的 columnWidth，请直接在项目上设置它的值，然后更新整个布局：

handler: function() {
    Ext.getCmp('btn2').columnWidth = 0.5;
    Ext.getCmp('panel').updateLayout();
}

完整示例：https://fiddle.sencha.com/#fiddle/pjm

如何在运行时在 ExtJs columnLayout 中设置 columWidth 配置？

How to set columWidth config at runtime in ExtJs columnLayout?

extjs

extjs5