带有隐藏组件的 ExtJs hbox答案

【问题标题】：ExtJs hbox with hidden component带有隐藏组件的 ExtJs hbox
【发布时间】：2012-08-31 01:39:29
【问题描述】：

在 hbox 布局中，如果我们隐藏一个组件，那么所有其他组件都会重新对齐。

考虑到我有以下布局，

hbox1:

   combo1  combo2 combo3 combo4

如果我隐藏组合 1，那么布局会重新对齐，

hbox2:

  combo2 combo3 combo4

这里combo2重新定位到combo1的地方。

但我喜欢保留组件在 hbox1 中的位置。

有什么想法吗？

【问题讨论】：

标签： extjs combobox hbox

【解决方案1】：

1* 您可能应该制作 2 个嵌套控件并隐藏内部控件，同时保持外部控件的宽度不变.. 这种方法会增加开销，但会做的事情
2* 远离 extjs 的另一件事是操作 dom。extjs 在彼此内部创建多个 div，因此您可以手动访问其中一个内部 div 并将其隐藏
3* 不要在 extjs
中使用 hide() 函数，而是创建一个特殊的隐藏函数，将 div 组件的样式更改为隐藏，并将 div 的所有可能颜色设置为透明或背景颜色。它仍然会被隐藏，只是所有附加的事件都会起作用..
4* 或者，您可以屏蔽组件而不是隐藏它。这样用户就会知道这个特定项目已被禁用，并且用户也不会被允许与相应的组件进行交互

【讨论】：

谢谢 Parv.. 我会尝试你的建议。我已经实施了你的第四条建议。它工作正常。但是我们需要很好地隐藏组合。

【解决方案2】：

(1) 我们最近实施的一个解决方案是允许隐藏组件参与 HBOX 布局的布局/调整大小：

不要使用Ext.Component#hide 隐藏组件，而是使用Ext.Component#disable 禁用它们。此外，在每个组件上配置 cls 属性，例如ghost.

然后定义一个 CSS 规则

ghost.x-item-disabled {
    visibility: hidden;
}

背景：

因为组件不被视为对 Ext 布局引擎“隐藏”，所以将考虑调整大小/布局。
浏览器不会渲染任何可见的表示，而是让元素占据盒子模型中的空间——这是display:block和visibility:hidden之间的主要区别。
因为组件是disabled，所以它不会响应任何用户交互。

(2) 尝试将这些组件的hideMode 设置为visibility。见http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-hideMode。

如果您渲染工具栏时所有项目最初都可见，然后隐藏单个项目，这可能会起作用。但是，我实际上希望它根本不工作或在非常有限的情况下工作。最好使用 (1)。

【讨论】：

感谢您的回答。我通过将 dom 隐藏为 component.el.dom.hidden=true 来实现； //隐藏combo的文本字段 component.el.dom.nextSibiling.hidden = true; // 隐藏combo的下拉图片

【解决方案3】：

感谢您的回答。我通过将 dom 隐藏为来实现，

component.el.dom.hidden=true;  //Hides the text field of combo
component.el.dom.nextSibiling.hidden = true; // hides the drop down imageof combo

【讨论】：