In ext js panel having items and it is only shown on press of f12 button or If already in debug session on close of f12 window shows the panel

Question

In ext js I have a form panel that will add items on tab click i.e. items related to clicked tab.Im destroying the before created items and adding new items to the panel. Items are getting added properly but panel is not displayed. When I press f12 or if im using f12 if I close the console at this time the panel is shown. on f12 window open or close the panel is shown. Why not before ? What could be the problem?

Answer 1

I assume that you are using a Chrome browser and pressing F12 shows/hides the developer tools. So this action resizes the viewport, forcing a refresh of the panel layout and the components become visible.

When adding/removing items from a panel a yourformpanel.doLayout() could help recalculating the layout.

Another option is to embrace the adding/removing of items with the following code:

Ext.suspendLayouts();
... // add/remove items here
Ext.resumeLayouts(true);

BTW: More details on your problem would be helpful (e.g. code snippets, ExtJS version).