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中,布局系统为您管理.尽管该方法仍然存在,但您永远不必使用它.

Answer 2

您应该使用元素的“可见性”属性。诀窍在于，即使是不可见的元素也会占用页面上的空间。

object.style.visibility="hidden"