PDA

View Full Version : problem about switch gridpanels in a panel



buzhisihuo
25 Feb 2009, 7:01 AM
The layout is like this:
west region is a tree, when I click a node, the corresponding gridpanel shown in center region.

Now when I click 'A' node, the 'A' gridpanel shown good, but the problem is when i click B node, the 'B' gridpanel don't show grid content, just tbar,header and bbar. the configure of 'B' gridpanel is same as 'A'.
And, if i change click order, then 'B' gridpanel shown good instead of 'A'.

Below is my code:

1?this is outermost panel


this.panel = new Ext.Panel( {
id:'py-permission-console',
title :'Permission Console',
layout :'border',
defaults : {
collapsible :true,
split :true
},
items : [ treePanel, {
region :'center',
collapsible :false,
border:false,
id:'py-permission-console-center',
layout:'fit'
} ]
});


2)click handler:


onTreeClick:function(node,e){
switch(node.id){
case 'user':
var p = py.admin.permission.User.create({}).init();//Singleton instance
var centerPanel = this.panel.getComponent('py-permission-console-center');
this.util.displayPanel(centerPanel,p);
break;
case 'function':
var p = py.admin.permission.Function.create({}).init();//Singleton
var centerPanel = this.panel.getComponent('py-permission-console-center');
this.util.displayPanel(centerPanel,p);
break;
default:
break;
}
}


3)switch function


py.common.Util.displayPanel = function(cPanel, panel){
var len = cPanel.items.items.length;
for ( var i = 0; i < len; i++) {
if (cPanel.items.items[i].id == panel.id) {
cPanel.items.items[i].setVisible(true);
} else {
cPanel.items.items[i].setVisible(false);
}
}
if(!cPanel.getComponent(panel.id)){
cPanel.add(panel);
}
cPanel.doLayout();
};


In addition, I tried
grid.syncSize();
grid.ownerCt.syncSize();
grid.ownerCt.ownerCt.syncSize();
but none is useful.

Animal
25 Feb 2009, 7:18 AM
Looks like you'd be better off using a card layout. See API docs and examples.

arthurakay
25 Feb 2009, 7:47 AM
Rather than defining your panel like this:



items : [ treePanel, {
region :'center',
collapsible :false,
border:false,
id:'py-permission-console-center',
layout:'fit'
} ]


...why not create a default grid panel?



var defaultGridPanel = new Ext.grid.GridPanel({...});

...
items : [
treePanel,
defaultGridPanel
]
...


Then (based on the tree node which is clicked) use reconfigure() on your grid to swap columns and stores?

buzhisihuo
25 Feb 2009, 8:03 AM
Rather than defining your panel like this:



items : [ treePanel, {
region :'center',
collapsible :false,
border:false,
id:'py-permission-console-center',
layout:'fit'
} ]


...why not create a default grid panel?



var defaultGridPanel = new Ext.grid.GridPanel({...});

...
items : [
treePanel,
defaultGridPanel
]
...


Then (based on the tree node which is clicked) use reconfigure() on your grid to swap columns and stores?

because actually two grid panel are different, such as buttons. i don't think i can just use reconfigure()

arthurakay
25 Feb 2009, 8:07 AM
You could also add multiple toolbars to the grid, and show/hide the appropriate one based on the node clicked.

buzhisihuo
25 Feb 2009, 8:11 AM
Looks like you'd be better off using a card layout. See API docs and examples.

Well, maybe cardlayout is ok, but can you tell me why this is not ok? I guess this maybe relate with add/hide order?although I tired many times?, or container size changed after hide inner panel ...somthing must be wrong. no reason the first time is ok, the second time is wrong.

Could you give more suggestion. thank you.

buzhisihuo
25 Feb 2009, 8:16 AM
You could also add multiple toolbars to the grid, and show/hide the appropriate one based on the node clicked.

Yes, thank you, but i think it's seems more simple that use two different panel. I wanna try more.