PDA

View Full Version : Puzzled about layout configuration...



philipp_sidarion
22 Apr 2010, 5:42 AM
Hello!
I have a problem regarding the layout parameter. I have an Ext.FormPanel Object with the following code:

var vModifyHostPanel = new Ext.FormPanel({
title: 'Modify Host',
id: 'ModifyHostPanel',
tools: tools,
draggable:true,
closeable: false,
bodyStyle:'padding:5px 5px 0',
layout:'fit',
width: 280,
frame:true,
autoWidth : true,
items : [{
layout : 'column',
layoutConfig : {
columns : 3
},
items : [{
columnWidth : .6,
layout : 'form',
labelWidth : 120,
items : [
vHostNameFieldAutoCombo,
vNewHostNameField,
vForwardZonesListCombo,
vForwardZonesListComboForSelection,
vIPHostAddressFieldAutoCombo,
vAliasesTextField,
vLocationTextField,
vCommentTextField,
vMACHostAddressFieldAutoCombo
],
buttons:
[{
text: 'Modify',
tooltip: 'Modify host',
handler: function() {
...
} //end handler
}, {
text: 'Delete',
tooltip: 'Delete this host',
handler: function()
{
...
} //end handler
}, {
text: 'Get this host data',
tooltip: 'Get this host data',
handler: function()
{
...
} //end handler
}, {
text: 'Clear',
tooltip: 'Clear all fields to default values',
handler: function() {
...
}
}] //end button
}, {
columnWidth : .1,
layout : 'form',
labelWidth : 120,
items : [{
html:'    '
}],
},{
columnWidth : .3,
layout : 'form',
labelWidth : 120,
items : [{
html:'Add here some text to explain the functionality...'
}],
}]
}]
});



The result looks like the following:

20085

I now wanted that the buttons are centered below the formular fields... So I tried the change the layout of the panel to the form layout, i.e.:


var vModifyHostPanel = new Ext.FormPanel({
title: 'Modify Host',
id: 'ModifyHostPanel',
tools: tools,
draggable:true,
closeable: false,
bodyStyle:'padding:5px 5px 0',
layout:'form',
width: 280,
frame:true,
autoWidth : true,
//... rest of the code remains unchanged.


Now, the buttons are centered, but the formulat-trigger-buttons are not rendered nicely unless I click into one of the formular fields, the result looks like this:

20086

How can I render the trigger-buttons "nicely"? Does anybody has a solution? Thank you very much for your help!
Kind regards
Philipp

jay@moduscreate.com
26 Apr 2010, 5:22 AM
Please reformat your post to use code tags. It's really hard to read what you have.

philipp_sidarion
26 Apr 2010, 6:13 AM
Sorry... I attached the corresponding formatted piece of code as txt file (see Example.txt)... Hope this helps...
Thanks a lot for your help!
Regards Philipp

jay@moduscreate.com
26 Apr 2010, 6:32 AM
or



this is code

why require me to download something?

philipp_sidarion
26 Apr 2010, 7:15 AM
Sorry, maybe I'm blind, but I don't find the option how to paste/insert code well formatted? Thanks for your patience :-)

jay@moduscreate.com
26 Apr 2010, 7:20 AM
http://tdg-i.com/img/screencasts/2010-04-26_1119.png

philipp_sidarion
26 Apr 2010, 1:00 PM
Hi

Ok I try again, hope that now it's rmore readable and clear. Thanks again fpor your help!!!



var vModifyHostPanel = new Ext.FormPanel({
title: 'Modify Host',
id: 'ModifyHostPanel',
tools: tools,
draggable:true,
closeable: false,
bodyStyle:'padding:5px 5px 0',
layout:'fit',
width: 280,
frame:true,
autoWidth : true,
items : [{
layout : 'column',
layoutConfig : {
columns : 3
},
items : [{
columnWidth : .6,
layout : 'form',
labelWidth : 120,
items : [
vHostNameFieldAutoCombo,
vNewHostNameField,
vForwardZonesListCombo,
vForwardZonesListComboForSelection,
vIPHostAddressFieldAutoCombo,
vAliasesTextField,
vLocationTextField,
vCommentTextField,
vMACHostAddressFieldAutoCombo
],
buttons: [{
text: 'Modify',
tooltip: 'Modify host',
handler: function() {
...
} //end handler
}, {
text: 'Delete',
tooltip: 'Delete this host',
handler: function()
{
...
} //end handler
}, {
text: 'Get this host data',
tooltip: 'Get this host data',
handler: function()
{
...
} //end handler
}, {
text: 'Clear',
tooltip: 'Clear all fields to default values',
handler: function() {
...
}
}] //end button
}, {
columnWidth : .1,
layout : 'form',
labelWidth : 120,
items : [{
html:'    '
}],
},{
columnWidth : .3,
layout : 'form',
labelWidth : 120,
items : [{
html:'Add here some text to explain the functionality...'
}],
}] //end "inner" items...
}] // end outer items
});


The result looks like the following:
20160

I now wanted that the buttons are centered below the formular fields... So I tried the change the layout of the panel to the form layout, i.e.:



var vModifyHostPanel = new Ext.FormPanel({
title: 'Modify Host',
id: 'ModifyHostPanel',
tools: tools,
draggable:true,
closeable: false,
bodyStyle:'padding:5px 5px 0',
layout:'form',
width: 280,
frame:true,
autoWidth : true,
//... rest of the code remains unchanged.


Now, the buttons are centered, but the formulat-trigger-buttons are not rendered nicely unless I click into one of the formular fields, the result looks like this:

20161

How can I render the trigger-buttons "nicely"? Does anybody has a solution? Thank you very much for your help!
Kind regards
Philipp