View Full Version : grid having form below it.

18 Oct 2010, 2:44 AM
can you please give example of grid having form below it.

I tried from with grid from following example

but when I try to take form below grid. there is lot of misalignment. please find image attach for better understanding

18 Oct 2010, 5:26 AM

Have you tried a different layout for the container, such as a "vbox" layout? That might better align the grid and the form, and also allow you size and space-out the two components more properly.

18 Oct 2010, 10:40 PM
I am unable to solve this problem can you please give me link to sample where this problem is resolved

19 Oct 2010, 5:18 AM
In the Ext 3.3.0 API download (or in the 3.2.x if you have that), you can look at the examples/layout/vbox.html demo of the vbox layout and how it works. There is also the API documentation for the layout at http://dev.sencha.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout. Your component would be configured something like this:

new Ext.Panel({
height: 500,
layout: {
type: 'vbox',
align: 'stretch'
// ...
items: [{
xtype: 'grid',
flex: 1,
// ...
xtype: 'form',
flex: 1,
// ...

In the end you can adjust the flex values of the grid and form, as each having "1" will mean they each get 50% of the height. You can space them out by applying the margins (http://dev.sencha.com/deploy/dev/docs/?class=Ext.BoxComponent&member=margins) configuration to the grid and/or the form components.

Hope that helps!