View Full Version : Panel rendering in undisplayed div

11 Jun 2012, 7:08 AM
Hi all,

I'm trying to play a little bit with the new ExtJS 4.
Actually I'm trying to with two tree panels which I add to html divs.
Each panel is width 100% and height 100%.
When the page loads, my first panel is displayed and the second has display : none.
A radio button allows me to switch the view between these two panels but for the one that is not displayed on page loading, the tree body has width: 0px and height: 0px so it cannot be seen. That's logic since the size is in percentage and it's trying to calculate 100% of 0.
Then I would like to know if there is a way (as we had with ExtJS3) to recall a render function or something equivalent (doLayout and doComponentLayout do not work for me) ?


11 Jun 2012, 9:47 AM
You might be better off using a single DIV centered in the page, then use a Panel (with a Card (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Card) layout) and configured with renderTo: 'your_div_ID_Here'. Each Tree Panel will be a child card and you can easily switch back and forth between them.

Preferably, I recommend doing away with the DIV/HTML altogether and let a Viewport (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Viewport) manage the layout (assuming that you aren't needing to merge some ExtJs components into an existing HTML page).

14 Jun 2012, 11:40 AM

Thanks for your answer.
Indeed a card layout is probably the best way to do. However not the easiest way to implement it in my context.
In addition I retrieve some generated html components (then unfortunately no easy Viewport usage)

Thanks again for your answer