ExtJS：添加/删除某些表单字段后动态调整布局答案

【问题标题】：ExtJS: dynamically ajust layout after adding/removing some form fieldsExtJS：添加/删除某些表单字段后动态调整布局
【发布时间】：2009-11-11 12:24:25
【问题描述】：

我的表单布局包含一些 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下方的空白区域。

【问题讨论】：

标签： javascript extjs

【解决方案1】：

当你从容器中添加/移除组件时，你必须调用 Container.doLayout() 让它重新计算尺寸。

[编辑]：请注意，这仅适用于 Ext

【讨论】：

实际上并没有帮助。当某个元素刚刚被隐藏时，HtmlEditor（或textarea）下方会出现空白。
我的评论假设 (A) 您的小部件设置了正确的锚点，并且 (B) 所有嵌套容器都配置了适当的布局。如果您的其他内容设置不正确，则 doLayout() 将无济于事，但由于您没有发布任何代码，因此无法判断问题可能是什么。
还有一件事——假设你有一些复杂的应用布局，为了解决这个问题，你应该编写一个简单的测试用例，其中包含一个非嵌套的 FormPanel 以及足够的字段和布局代码来测试你的设想。一旦你完成了这项工作，就会更容易弄清楚你可能需要在你的应用程序代码中进行哪些更改。你的用例是完全可以实现的，因为我之前做过完全相同的事情。
刚刚添加了示例代码。我也找到了解决方法，但效果不是很好。一句话——隐藏项目时修改anchor属性并清空htmlEditor的anchorSpec属性。

【解决方案2】：

[新答案，我可以格式化代码]

一种方法是让您的外部布局更符合您的需求，例如带有北（您的顶部字段）和中心（html 编辑器）的 BorderLayout。这样，html 编辑器可以简单地锚定到其容器高度的 100%（中心区域）。在这种情况下，由于布局会得到妥善管理，我之前的 doLayout() 建议应该可以工作。

如果您真的想管理有助于您执行此操作的布局之外的字段，那么您可以手动管理高度。修改锚属性是一种方法。我过去的做法（并且更可取）是监听适当的事件并根据需要设置组件的大小。因此，例如，您可以向窗口添加一个调整大小的侦听器：

    listeners: {
        'resize': function(){
            Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110);
        }
    }

使用您的测试代码，这让您非常接近。但是，在实际代码中，您实际上希望从现有的可见组件中获取高度并减去该数字，而不是对其进行硬编码，但您明白了。使这种方法更容易的一种方法是将顶部字段添加到 autoHeight:true 的单独面板中，然后在显示或隐藏字段后，只需测量该面板的高度并从窗口高度中减去它（加上边距/填充）获取您的 html 编辑器高度（这是我过去无法依靠布局来管理它时所做的）。

如您所见，给这只猫剥皮的方法有很多种，因此您可以选择最适合您的方法。

【讨论】：

【解决方案3】：

尝试将这个Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 放在窗口的afterlayout 事件中并在那里添加一个条件...

像这样：

'afterlayout': function() {
   <condition> {
       Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false);
   }
}

希望这会有所帮助！

【讨论】：

【解决方案4】：

使用autoHeight:true 并调整窗口大小以适应容器。

【讨论】：

【解决方案5】：

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

object.style.visibility="hidden"

【讨论】：