ExtJs hbox with hidden component

Question

In the hbox layout, if we hide a components then all the other components get realigned.

Consider that i have the following layout,

hbox1:

   combo1  combo2 combo3 combo4

if i hide combo 1 then the layout gets realigned as,

hbox2:

  combo2 combo3 combo4

Here combo2 re positioned to combo1 place.

But i like to retain the position of the components as in hbox1.

Any ideas?

Answer 1

1* you should probably make 2 nested controls and hide the inner one while keeping the width of the outer one constant.. this method adds and overhead, but will do the thing
2* other thing you can do a little going away from extjs is manipulate the dom.. extjs creats several divs inside one another so you can manually access one of the inner divs and hide it
3* dont use the hide() function in extjs
but create a special hide function that changes the style of the div component to hide and set every possible color of the div to either transparent or that of background. it would still be hidded just that all the events attached would work..
4* alternatively you can mask the component rather hiding it.. this way user would know that this particular item is disabled and also the user wont be allowed to interact with the respective componnent

Answer 2

(1) A solution that we just recently implemented to allow hidden components take part in the layouting/sizing of a HBOX layout is this:

Instead of hiding the components with Ext.Component#hide, disable them using Ext.Component#disable. Additionally, configure a cls property on each component, e.g. ghost.

Then define a CSS rule

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

Background:

• Because the component is not considered 'hidden' to the Ext layout engine, it will be considered for sizing/layouting.
• The browser will not render any visible representation, but have the element occupy space in the box model - this is the main difference between display:block and visibility:hidden.
• Because the component is disabled, it will not respond to any user interaction.

(2) Try setting hideMode of these components to visibility. See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-hideMode.

This might work if you render the toolbar with all items initially visible, then hide individual items. However, I actually expect it to either work not at all or in very limited scenarios. Better go with (1).

Answer 3

Thanks for your answers. i achieved by make the dom to be hidden as,

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