PDA

View Full Version : Need control over Layout



bunty
21 Sep 2012, 6:18 AM
HI all,

Below is the code I tried for my layout inside a panel:


Ext.widget('panel', { renderTo: 'pan1',
title: 'Basic Panel',
collapsible:true,
width:980,
height:155,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
bodyPadding: 10,
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name'
},{
xtype:'textfield',
fieldLabel: 'Last Name'
},{
xtype:'textfield',
fieldLabel: 'Age'
}]
},{
items: [{
xtype:'textfield',
fieldLabel: 'Id'
},{
xtype:'textfield',
fieldLabel: 'Address'
},{
xtype:'textfield',
fieldLabel: 'Sex'
}]
}]
});

In this code, the items are placed one below the other, once the first list of items are placed, the second item list is iterated and placed one after another in a different column.

I don't want it to be in this way. I want the 1st list items to be placed one beside another in a single row, then the second list of items in next row one beside another and so on. Reason: In this way, I can merger two cells like we do in html using colspan = "2"

Edit: Yes, I can have a number of items with each item with one element in it but I don't think it is the proper way of doing.

Please inform how to achieve this?

I tried changing the hbox to vbox but it did not worked. Looking into the examples, totally confused with flex and other layout related stuffs.

Regards,

burnnat
21 Sep 2012, 7:47 AM
Sounds to me like you might want to use a table layout: Ext.layout.container.Table (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Table)