layout for gridpanels

[avivenna]

Hi friends,

I am trying to put twro grid panels in to a layout using viewport. I am using the following snippet

Ext.create('Ext.Viewport', {
layout: 'border',
align:'middle',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1> Ext.Layout.Browser</h1>',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'center',
border: false,
split:true,
margins: '2 0 5 5',
width: 100,
minSize: 100,
maxSize: 500,
items: [grid1,grid2]
} ],
renderTo: Ext.getBody()
});

I am unable to get it accomplished. only one grid occupies the entire space. Also can I put other items like combobox along with grid on particular side of a layout? please do guide me. Thanks in Advance

[scottmartin]

I am not sure the direction your are trying to go .. but this may get you started:
You may also want to have at our Sencha Architect for WYSIWYG design of forms.
http://www.sencha.com/products/architect/

var grid1 = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.create('Ext.data.ArrayStore', {}),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    flex: 1
});

var grid2 = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.create('Ext.data.ArrayStore', {}),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    flex: 1
});

Ext.create('Ext.Viewport', {
    layout: 'border',
    align: 'middle',
    title: 'Ext Layout Browser',
    items: [{
        xtype: 'box',
        region: 'north',
        html: '<h1> Ext.Layout.Browser</h1>',
        height: 30
    },
    {
        layout: 'vbox', // or hbox
        region: 'center',
        border: false,
        split: true,
        margins: '2 0 5 5',
//        width: 100,
//        minSize: 100,
//        maxSize: 500,
        items: [ grid1, grid2 ]
    }]
});​

Scott.