javascript - ExtJS:添加/删除一些表单字段后动态调整布局

Question

我的表单布局包含一些 TextField 元素和一个 HtmlEditor 元素。一些 TextField 元素是“可隐藏的”，即可以隐藏或显示。隐藏/显示元素后 HtmlEditor 实例中断布局 - 出现空白区域或元素未在窗口边界处结束。

是否可以告诉 HtmlEditor 实例使用所有剩余的可用空间？即使某些元素被隐藏/显示。

我试过使用 anchor 属性，但在某些元素从布局中移除之前它一直有效。

已更新这是一个示例代码:

var htmlEditor = new Ext.form.HtmlEditor({
    anchor: '100% -54',
    hideLabel: true
});

var fp = new Ext.form.FormPanel({
    items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, 
            {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'},
        htmlEditor]
});

var w = new Ext.Window({layout: 'fit',
    height: 400, width: 600,
    tbar: [{text: 'click',
        handler: function() {
            // hide element
            Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false);
            w.doLayout();
        }
        }],
    items: fp   
});

w.show();

执行，点击工具栏按钮“点击”，一个字段应该消失，然后看htmleditor下面的空白区域。

Answer 1

当您从容器中添加/删除组件时，您必须调用 Container.doLayout() 以使其重新计算尺寸。

[编辑]:请注意，这仅适用于 Ext <= 3.x。在 4.x 中，布局系统会为您管理这些。尽管该方法仍然存在，但您永远不必使用它。