View Full Version : Add already rendered Component to other one.

21 Jun 2010, 12:37 AM
Hi, guys, need your help today)

I have Panel with border layout with two elements: north and center.
North - it's a treePanel.
Center - formPanel or gridPanel, dependes of which node you are selected in the tree.

So, what's the problem. I've created two instance - one for form and one for grid, then i'm trying to add these components to common panel via add() method, then doLayout(), everything is okey. Couz center depends on node-type i need replace grid to form or from to grid. So, i remove it each time with false parameter, then i try add grid/form back to panel via add()... it's working... but doLayout() doesnt work and i cant see my grid/form again.

So, it works only if it wasnt rendered before. How can i add already rendered component to already rendered Panel properly?

some code example:

if(panel.items.getCount() == 0 || panel.items.first().xtype != 'xapp_calculatorGrid'){
panel.doLayout(false, true);

console.log('render grid');

if(panel.items.getCount() == 0 || panel.items.first().xtype != 'xapp_calculatorForm'){
panel.doLayout(false, true);

console.log('render form');

21 Jun 2010, 12:40 AM
Don't make your life so difficult! This is a classic case for layout:'card'!

21 Jun 2010, 3:16 AM
Can i do things like this?

SExt.MyPanel = Ext.extend(Ext.Panel, {
layout : 'border',
border : false,
defaults: {
border: false,
split : true,
layout: 'fit'
items: [{
region : 'east',
height : 200
region : 'center',
layout : 'card',
activeItem: 0

should i create additional instance of Ext.Panel in center region? or it's going by default in this case?

Which value should be set in activeItem if there is no items by default?

21 Jun 2010, 3:18 AM
dont worry about constructor calling and initComp method, i cut it from here..

21 Jun 2010, 3:45 AM
So you actually need 3 cards:
- An empty one
- A grid
- A form

21 Jun 2010, 4:24 AM
yeah, already did it ;-) thank you for quick feedback.

21 Jun 2010, 5:03 AM
Heh, now there is a problem with loadMask... at first load it shows load mask at top left corner of the grid. I guess the same problem like here - http://www.sencha.com/forum/showthread.php?23289-How-to-center-Load-Mask-in-empty-Grid

Any suggestion?)

21 Jun 2010, 5:40 AM
That is usually caused by a misconfigured layout.

What is your current layout?

21 Jun 2010, 10:32 AM
card layout.

21 Jun 2010, 11:14 AM
Funny... I mean the entire config object (how the grid is included in its containers).

21 Jun 2010, 11:18 AM
maybe i dont understand what are you talking about) i have viewport in center region i have border panel which has center region with card layout and two items in it - panel and grid.

items of panel which has card layout:

items : [
html : 'Choose node',
border: false
xtype: 'xapp_calculatorForm'
xtype: 'xapp_calculatorGrid'

where: xapp_calculatorGrid, xapp_calculatorForm - my custom grid and panel.

22 Jun 2010, 10:52 PM
Looks correct.

Could it be that your card layout container needs:

defaults: {hideMode: 'offsets'}

22 Jun 2010, 11:03 PM
heh, at first load there is no mask load )) i mean we have gray layer over the grid, but no box with text "Loading...". At second load it came back) is it expected behavior? Anyway, it's better then before. Thank you very much for advice.

22 Jun 2010, 11:55 PM
Is xtype:'xapp_calculatorGrid' a GridPanel or does it contain a GridPanel?

22 Jun 2010, 11:58 PM
it's a EditorGridPanel:

Application.calculator.CalculatorGrid = Ext.extend(SExt.AbstractGridPanel,{...})


SExt.AbstractGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {...});

22 Jun 2010, 11:59 PM
This can also happen when you start loading the store when the grid is still hidden.

23 Jun 2010, 1:54 AM
Yeah! That was the reason. Now it works perfect. Thank you!