Sencha Touch: Panel.hide()/show() works only after resize

问题

Here's a demo app: demo Sencha Touch app. The button in the bottom-left corner should show/hide the menu panel on top of the "Location info goes here" bar, however, it works in a strange way.

Here's how (IMO) it should work:

I click a button
A panel appears

Here's how it works now:

I click a button
Nothing happens
I resize a window or press F11 (which is resizing too, anyway)
A panel appears

So, can somebody explain why is this happening and how can I solve my issue? Thx.

回答1:

I've found a way to get around this. Here it is:

app.viewport.dockedItems.items[0].rendered = false;
app.viewport.doComponentLayout();

So, problem solved.

回答2:

I don't know exactly what your code is doing but you need to do a doLayout or doComponentLayout call on the Panel to refresh the items when adding or removing components.

The resize event which happens when changing the browser window performs that call which is probably the reason why you are seeing that behavior.