View Full Version : Viewport and dynamic render panels

25 Oct 2010, 4:49 AM

I've found no matches for this issue. I have one main viewport in my app, which is rendering on loading, next I want to dynamic load content e.g in the 'center' region (after click etc.), and with simple html content it's no problem, but when I want to load some ExtJS object like panel, it's not rendering correctly... e.g panel with layout 'accordion' has only titlebar and tabs titles but have no content inside the bars (content is loading by ajax) :s so it is possible to load another ExtJS component and render it after load in a viewport?

Thx for help!

25 Oct 2010, 5:03 AM
You are using autoLoad or panel.load()? That is only meant for HTML fragments and not for Ext components.

Have a look at the LiteRemoteComponent user extension to see how to load Ext components.

25 Oct 2010, 5:21 AM
I'm using ExtJS 3.2.1 and I render (by 'renderTo' option) this viewport 'onReady' event.

25 Oct 2010, 5:28 AM
It's OK to render the viewport (although it doesn't really need a renderTo config option - it will already do that).

But how are you loading things in the center region?

25 Oct 2010, 5:50 AM
Ok, so maybe it's wrong way... in the center region I render TabPanel (1 tab with id: 'tab1') so I have div with id 'tab1', in the west panel I render some kind of menu (just button with handler, handler do ajax request and gets html, then inserts this html (with ExtJS code) into specified div by id (in this case div with id: 'tab1')) so in the end I should have one place (tab) when I can put some different components like Panels, Grids etc. but this inserted html with ExtJS code render component but it's rendered incorrectly... (it has only titlebar and no content)

I know that maybe it's too much complicated, but I have to do this this way... :]

Thx for help!

25 Oct 2010, 6:03 AM
1. I assume you are including the tabpanel as the center region item and not actually 'render'ing it yourself - that would be wrong?

2. Do NOT render inside a layout! add() components to your id:'tab1' container (and call doLayout() after that).

25 Oct 2010, 11:49 PM
Thanks for Your tips, I'm starting to understand what I'm doing wrong...

1. I assume you are including the tabpanel as the center region item and not actually 'render'ing it yourselfYep, but actually I'm including grid into the tabpanel (tabpanel is already rendered in the viewport). So the grid should be rendered inside the tabpanel (inside first tab with id: 'tab1' ). Now the grid is rendered instead of loading the html content with ExtJS code by 'renderTo' option and as You noticed it's wrong, the gridPanel id rendered incorrectly (has no height at all) so now I'm trying to use 'doLayout()' method.


26 Oct 2010, 5:43 AM
ok, I figured out what was wrong... the main cause of incorrect rendering was unable to calculate width and height of component container (tabPanel in this case) by the new panel, so I save tabPanel height after render and when I load content with another panel I just set this panel height to saved height of tabPanel :)

Of course there is another problem :)) ... I use 'accordion' layout in the east region and everything is ok, it's render correctly but when I close all tabs and try to open tab, all panel has 0 height (only titles of tabs are visible and after click nothing happen (only 'cross' icon switch to 'minus') ) What's going on? (:| Should I save the height of this 'accordion' panel and then update it? But in the Ext examples it's works fine... :s

Thx for any tips!