PDA

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



Skay
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.removeAll(false);
panel.add(grid)//.ownerCt.doLayout();
panel.doLayout(false, true);

console.log('render grid');
}


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

console.log('render form');
}

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

Skay
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?

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

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

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

Skay
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?)

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

What is your current layout?

Skay
21 Jun 2010, 10:32 AM
card layout.

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

Skay
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.

Condor
22 Jun 2010, 10:52 PM
Looks correct.

Could it be that your card layout container needs:

defaults: {hideMode: 'offsets'}

Skay
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.

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

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




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

where:


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

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

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