[3.2] BoxLayout and items hidden with hideMode: 'visibility'

[tomcruz]

Hi guys,

I don't think this is a bug, so I'm posting here.

When a container has its hideMode set to "visibility", it will "keep" its box when hidden thanks to the used css rule. Assuming we're hiding our component using its "hide" method, it will set its own "hidden" flag to true.

Now a BoxLayout uses its "getVisibleItems" method to get a list of items to position. This method will explicitely filter items that have been hidden, even if their hideMode is set to "visibility". This means that if the item is shown again but no layout is called, it will have its sibling positioned over him.

I didn't find a better solution than calling "onHide" on the component, which basically hides it without setting hidden to true. This is most certainly not ideal, so I was wondering if there was a better way of dealing with this special use case.

Thanks,
J

[mitchellsimoens]

That is actually a bug as you are still wanting the component to take up space. What you could do is add a CSS rule that changes the opacity to 0 instead of hiding it.

[tomcruz]

Hi and thanks for your reply.

You're right, adding a css rule does the trick. I used the onHide method since it gets the visibility element and applies the right css class which I don't really want to hardcode. But adding an opacity changing css would work as well.

Should I report this as a bug then ? I checked in the 3.3.1 codebase and it is still there, I don't know where this is handled in ext 4 or if it reproduces. It would be easily fixed in ext 3 with an override like that :

Ext.override(Ext.layout.BoxLayout, {

    getVisibleItems: function(ct) {
        var ct  = ct || this.container,
            t   = ct.getLayoutTarget(),
            cti = ct.items.items,
            len = cti.length,

            i, c, items = [];

        for (i = 0; i < len; i++) {
            // override: replace c.hidden !== true with (c.hidden !== true || c.hideMode == 'visibility')
            if((c = cti[i]).rendered && this.isValidParent(c, t) && (c.hidden !== true || c.hideMode == 'visibility')  && c.collapsed !== true && c.shouldLayout !== false){
                items.push(c);
            }
        }

        return items;
    }
});

Thanks,
J