PDA

View Full Version : FormPanel column layout



sanjshah
7 Jan 2010, 8:14 AM
Hi,

Could anyone please help, I'm trying to create a panel with a column layout, the follwoing does not work (everything is bunched together to the left):



var searchForm = new Ext.form.FormPanel({
layout: 'column',
items: [{
columnWidth: '.5',
items: [
{ xtype: 'datefield', fieldLabel: 'Date From', name: 'DateFrom' },
{ xtype: 'datefield', fieldLabel: 'Date To', name: 'DateTo' },
{ xtype: 'textfield', fieldLabel: 'Email Type', name: 'EmailType' },
{ xtype: 'textfield', fieldLabel: 'Subject', name: 'Subject' }
]
}, {
columnWidth: '.5',
items: [
{ xtype: 'textfield', fieldLabel: 'Recipient', name: 'Recipient' },
{ xtype: 'textfield', fieldLabel: 'Email Text', name: 'EmailText' }
]
}
],
defaults: { width: 200 },
buttons: [
{ text: 'Clear', handler: function () { searchForm.getForm().reset(); this.onSearch() }, scope: this },
{ text: 'Search', handler: this.onSearch, scope: this }
]
});

But the following works without the column layout:



var searchForm = new Ext.form.FormPanel({
items: [
{ xtype: 'datefield', fieldLabel: 'Date From', name: 'DateFrom' },
{ xtype: 'datefield', fieldLabel: 'Date To', name: 'DateTo' },
{ xtype: 'textfield', fieldLabel: 'Email Type', name: 'EmailType' },
{ xtype: 'textfield', fieldLabel: 'Subject', name: 'Subject' },
{ xtype: 'textfield', fieldLabel: 'Recipient', name: 'Recipient' },
{ xtype: 'textfield', fieldLabel: 'Email Text', name: 'EmailText' }
],
defaults: { width: 200 },
buttons: [
{ text: 'Clear', handler: function () { searchForm.getForm().reset(); this.onSearch() }, scope: this },
{ text: 'Search', handler: this.onSearch, scope: this }
]
});


Thanks for any pointers!

flanders
7 Jan 2010, 9:16 AM
In your second example the formpanel automatically gets a form layout manager, this layout is responsible for rendering the fields and labels correctly.

When you divide your form into two parts they both become containers themselfs and also need an layoutmanager. So you need to set layout: 'form' on both containers. Then there's still a border renderd, you can remove this by adding a border: false option.

Resulting in:

var searchForm = new Ext.form.FormPanel({

layout: 'column',

items: [{

columnWidth: '.5',

items: [

{ xtype: 'datefield', fieldLabel: 'Date From', name: 'DateFrom' },

{ xtype: 'datefield', fieldLabel: 'Date To', name: 'DateTo' },

{ xtype: 'textfield', fieldLabel: 'Email Type', name: 'EmailType' },

{ xtype: 'textfield', fieldLabel: 'Subject', name: 'Subject' }

],
layout: 'form', // <- ADDED
//xtype: 'fieldset',// <- not necesarry, but I would set it explicit
border: false // <- ADDED

}, {

columnWidth: '.5',

items: [

{ xtype: 'textfield', fieldLabel: 'Recipient', name: 'Recipient' },

{ xtype: 'textfield', fieldLabel: 'Email Text', name: 'EmailText' }

],
layout: 'form', // <- ADDED
//xtype: 'fieldset',// <- not necesarry, but I would set it explicit
border: false // <- ADDED

}

],

defaults: { width: 200 },

buttons: [

{ text: 'Clear', handler: function () { searchForm.getForm().reset(); this.onSearch() }, scope: this },

{ text: 'Search', handler: this.onSearch, scope: this }

]

});

sanjshah
7 Jan 2010, 9:22 AM
flanders, thanks for this - that's great!