PDA

View Full Version : layout for gridpanels



avivenna
16 Sep 2012, 9:12 AM
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
16 Sep 2012, 5:54 PM
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.