Question

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

考虑我有以下布局，

hbox1:

   combo1  combo2 combo3 combo4

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

hbox2:

  combo2 combo3 combo4

这里combo2重新定位到combo1位置。

但我喜欢像hbox1一样保留组件的位置。

有什么想法吗？

Answer 1

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

Answer 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）。

Answer 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

用隐藏组件ExtJs hbox

3 个答案: