PDA

View Full Version : FormPanel and Grid fit inside Window



Kloon
11 Mar 2010, 3:56 AM
Hi, I used to just have a grid inside the windows and just set the layout to fit on the windows, but now I would like to add a formpanel just above the grid.

Problem is if I set the window as fit it fits the formpanel and doesn't show the grid. What I would like is to have the formpanel occupy say only the 100px and then the grid must fit beneath it to the window.



var grid = new Ext.grid.GridPanel({
store: store,
layout: 'fit',
columns: [{etc...}]
});

var search = new Ext.FormPanel({
defaultType: 'textfield',
bodyStyle:'padding:5px 5px 0',
height: 100,
frame: true,
items: [
{fieldLabel:'Test', name:'text'},
]
});

win2 = new Ext.Window({
title: 'Maintain Rebate Rules',
width: 600,
layout: 'fit',
height: 500,
maximizable: true,
modal: true,
items:[search,grid]
});

Animal
11 Mar 2010, 3:58 AM
What is the first sentence in the API description of FitLayout?

Kloon
11 Mar 2010, 4:04 AM
It says its for a single item, so guess it can't be achieved that way.

Kloon
11 Mar 2010, 4:10 AM
I have now tried the different layouts, but cant seem to achieve the desired layout. Closest I have come is with AnchorLayout but my grid is still not filling the rest of the window.

Animal
11 Mar 2010, 4:12 AM
border?

Animal
11 Mar 2010, 4:12 AM
vbox?

b3t4n
11 Mar 2010, 4:34 AM
Hi,

You can specify 'vbox' or 'hbox' layout in your Window (with 'layoutConfig: { align:'stretch' }') and in the config of the items (the grid and the form) play with the 'flex' option.

See you!

Kloon
11 Mar 2010, 4:42 AM
Im just not getting this right, can you perhaps point out some changes to the above code to get this working please?

Animal
11 Mar 2010, 4:45 AM
change the layout!

Kloon
11 Mar 2010, 4:50 AM
This is what I have sovar


var grid = new Ext.grid.GridPanel({
store: store,
columns: [etc...]
});

var search = new Ext.FormPanel({
defaultType: 'textfield',
bodyStyle:'padding:5px 5px 0',
height: 100,
frame: true,
items: [
{fieldLabel:'Test', name:'text'},
{text:'Add', xtype: 'button'}
]
});

win2 = new Ext.Window({
title: 'My Window'
width: 600,
layout: 'vbox',
layoutConfig: { align:'stretch' },
height: 500,
maximizable: true,
modal: true,
items:[search,grid]
});

I am just unsure how to do the flex part.

Animal
11 Mar 2010, 4:51 AM
So, what do the docs say about flex?

Kloon
11 Mar 2010, 4:56 AM
Okay cool I got it working by simply adding flex:1 to the grid. I was just a bit unsure as to where I needed to add the flex property.

Thanks for the help guys.