PDA

View Full Version : Column layout issue in form panel



nawin.muttineni@gmail.com
1 Apr 2014, 11:17 PM
Hi all,


I have a form panel with some fields and they are arranged in column layout.
Here the fields are arranged in side by side.
When i zoom in the browser the fields are being arranged in one after another.
I am using Ext 4.2.1 and this issue is not raised in Ext 4.0.2 version.

Here is the code for the form panel.


Ext.create('Ext.panel.Panel', {
title: 'Column Layout',
width: 750,
height: 200,
layout:'anchor',
items: [{
xtype:'fieldset',
title: 'Employee Information',
collapsible: true,
layout: 'column',
items :[{
xtype: 'container',
columnWidth:.5,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'firstName',
},{
xtype:'textfield',
fieldLabel: 'Home Phone',
name: 'homePhone',
},{
xtype:'textfield',
fieldLabel: 'Work Phone',
name: 'workPhone',
},{
xtype:'textfield',
fieldLabel: 'Cell Phone',
name: 'cellPhone',
}
]
},{
xtype: 'container',
columnWidth:.5,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'lastName',
},{
xtype:'datefield',
fieldLabel: 'Date of Birth',
name: 'dateOfBirth',
format: 'm/d/Y',
},{
xtype:'datefield',
fieldLabel: 'End Date',
name: 'endDate',
format: 'm/d/Y',
}
]
}]
}],
renderTo: Ext.getBody()
});




Here are the screen shots the panels.
48521

48522

mdnaveed42
2 Apr 2014, 2:24 AM
layout:'anchor',

Try changing the layout to "hbox" instead of "anchor".