PDA

View Full Version : I need help, please!



TheBigOnion
15 Jun 2010, 7:14 AM
Hello all,
I have been working on this for about 4 days now, and have not found a solution.
I am trying to build something like the feed-viewer example. I have a grid on top and a panel below. When the user clicks on a row in the grid I display some information in the panel below. It works great. But now I want the ablility to move the bottom panel (south) to the right hand side (east).

Here is some of my code:


var embeddedTabPanel = {
title: 'Main'
,layout: 'border'
,tbar:mainToolbar
,defaults: {
split: true
}
,items: [
{
region: 'center'
,id: 'center-panel'
,items: [new Ext.Panel({
id: 'main-panel'
,items:[
{
region: 'center'
,id: 'north-panel'
,autoScroll: true
,items: mainGrid
,anchor: '100% 100%'
},{
region: 'south'
,id: 'bottom-panel'
,autoScroll: true
,split: true
,items: [new Ext.Panel({
id: 'body-panel'
,autoScroll: true
,anchor: '100% 100%' // anchor width and height
})]
}
]
})]
}
]
};


So, I can hide the south panel, but I cannot create an east panel. When I try, the east panel shows up where the south was.

In my toolbar I have a button that performs this action:


,handler: function(){
var preview = Ext.getCmp('bottom-panel');
preview.hide();
preview.ownerCt.doLayout();

var cnt = Ext.getCmp('center-panel');
cnt.add({
region: 'east'
,xtype: 'panel'
,id: 'east-panel'
,html: 'East side'
,anchor: '100% 100%'
});

cnt.ownerCt.doLayout();
}


Can someone please give me an example of how to make this work? I have tried many different things, but non of them seem to work.

Another thing I cannot get to work is to have the grid expand down to the bottom when I hide the bottom-panel.

Thanks.

CrazyEnigma
15 Jun 2010, 7:29 AM
For the future, you might want to title your post better. Ironically, everyone needs help on this forum. Hence its name.

I believe that you cannot create the region on the fly. I think I read that in the API somewhere.

The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region:

evant
15 Jun 2010, 7:34 AM
The docs are your friend, it even has an example:



The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region:

TheBigOnion
15 Jun 2010, 7:35 AM
lol, you are correct. I should have come up with a better title, but instead I used my only thought. HELP! :)

But thank you for your response. Could you please give me an example of how to do that?

Animal
15 Jun 2010, 7:38 AM
Overnesting.

Why have your center Panel (id: 'center-panel') contain another Panel (id: 'main-panel')?

That redundant wraper doesn't even have a layout config, and as the docs mention in four separate places, this means that child items ARE NOT SIZED.

CrazyEnigma
15 Jun 2010, 7:38 AM
Maybe create the regions ahead of time and collapsed, and then add it to the region when you need it.

TheBigOnion
15 Jun 2010, 7:58 AM
I don't know. I am very new to ExtJS. Can you please give me an example of how I should do it? I think that I put an outer center panel so my scroll would start working. Anyways, if you could give me a simple example of how it should be done, I would appreciate it.

evant
15 Jun 2010, 8:08 AM
As I said, there's an example in the docs for the BorderLayout class. Go look!

CrazyEnigma
15 Jun 2010, 8:21 AM
I'd be like evant, and say the same thing. Here is the API on Container Layout (http://www.sencha.com/deploy/dev/docs/?class=Ext.Container&member=layout).

The layout parameter specifies how the inner components will be laid out. The panel doesn't specify what it should do with the grid component, so it doesn't do anything with it. I don't even think the "anchor" parameter is recognized, unless you specify the layout to be "anchor". The first thing that has to be done is to remove the overnesting as Animal has stated. I am pretty sure you can do this, even if you are new to EXT JS, I mean Sencha. These are simple programming skills. If you are new to programming, that's a different story.