PDA

View Full Version : Problem with table layout placement



neeteesh
26 Nov 2009, 1:01 AM
Hi Friends,

I am new to EXTJS and for our project we require to build a form layout. I am using the table layout for that purpose, but the problem I am coming across is
1. there is too much spacing among the different rows.
2. the label having more than 13 characters are breaking up into two lines.
I am going on adding a fieldset for each cell in the table which contains the various form components such as textfield, and combo etc

the code is like this:


var createCust = new Ext.FormPanel({
renderTo: Ext.getBody(),
title: 'Create Customer',
layout: 'table',
frame: true,
defaults: {
border: true,
labelWidth: 140,
anchor: '100%'
},
layoutConfig: {
columns: 6,
tableAttrs: {
style: {
width: 1000
}
}
},
items: [{
html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>CREATE CUSTOMER</b></font></div>',
colspan: 3
}, {
xtype: 'fieldset',
border: false,
collapsible: true,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Customer Name',
name: 'cName',
width: 165,
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Customer Type',
name: 'cType',
mode: 'local',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Priority',
name: 'pri',
mode: 'local',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Region',
name: 'reg',
mode: 'local',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Segment',
name: 'seg',
mode: 'local',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'datefield',
fieldLabel: 'Creation Date',
labelStyle: 'font-weight: bold;',
name: 'date'
}]
}, {
html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>PERSONAL DETAILS</b></font></div>',
colspan: 3
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Title',
name: 'title',
mode: 'local',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'fName',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lName',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Initials',
name: 'init',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Department',
name: 'dept',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Position',
name: 'pos',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>ADDRESS</b></font></div>',
colspan: 3
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Address Line 1',
name: 'addLine1',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Address Line 2',
name: 'addLine2',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Address Line 3',
name: 'addLine3',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Country',
name: 'con',
mode: 'local',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'State/Province',
name: 'state',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'city',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Zip/Postal Code',
name: 'zipcode',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
html: '<div>&nbsp</div>',
colspan: 2
}, {
html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>CONTACT DETAILS</b></font></div>',
colspan: 3
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Day Telephone',
name: 'dTel',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Day Extension',
name: 'dExt',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Evening Telephone',
name: 'eTel',
anchor: '100%',
//labelWidth: 350,
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Evening Extension',
name: 'eExt',
//labelWidth: 150,
labelStyle: 'size:2; font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Mobile',
name: 'mob',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Fax',
name: 'fax',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
xtype: 'fieldset',
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
labelStyle: 'font-weight: bold;',
allowBlank: false
}]
}, {
html: '<div><a href="window.html">Add Sales Info</a></div>'
}, {
html: '<div>&nbsp</div>'
}],
buttons: [{
text: 'Submit',
align: 'center',
handler: function(){

}
}]
});


I have attached screen shot for my
1. code's output along with the
2. desired layout...

Please help.

Thank You,
Neeteesh

neeteesh
27 Nov 2009, 7:10 AM
please help... any help from you all will be highly appreciated

Thank You,
Neeteesh