PDA

View Full Version : [SOLVED] margins not being processed?



roady001
14 Aug 2009, 12:16 PM
I have a form within a popup-window. The form fields are a bit tight to the edges of this window; margins would make it much more visually appealing. I tried several places withing the code to place a 'margin: 10 10 10 10' or 'margin: 10px 10px 10px 10px'; however none of them gets processed and/or rendered?

Which code should I use and where to put it for margins to appear? Thanks for any reply!



var EditEventWindow = new Ext.Window({
height: 500,
maximizable: true,
modal: true,
autoScroll: true,
id: EditEventWindow,
width: 700,
layout: {
type: 'auto'
},
title: 'Edit Event',
items: [{
xtype: 'form',
id: 'form_event',
title: 'Form',
header: false,
mode: 'post',
defaults: {
msgTarget: 'under'
},
buttons: [{
text: 'Save',
handler: function () {
Ext.getCmp('form_event').getForm().submit({
url: '/dosomething.php',
waitMsg: 'Saving Data...',
success: function (form, action) {
Ext.MessageBox.alert('Success', action.result.msg);
},
failure: function () {
Ext.MessageBox.alert('Error', 'Error saving data');
}
});
}
},
{
text: 'Close',
handler: function () {
EditEventWindow.close();
}
}],
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'name',
value: 'New event',
width: 500
},
{
xtype: 'htmleditor',
enableFont: false,
enableAlignments: true,
enableColors: true,
enableFontSize: true,
enableFormat: true,
enableLinks: false,
enableLists: true,
enableSourceEdit: false,
fieldLabel: 'Description',
width: 500,
height: 220,
name: 'description',
value: ''
},
{
xtype: 'combo',
fieldLabel: 'Project',
name: 'projectID',
hiddenName: 'projectID',
displayField: 'ProjectName',
triggerAction: 'all',
mode: 'local',
valueField: 'ID',
store: new Ext.data.SimpleStore({
fields: ['ID', 'ProjectName'],
data: [
['1', 'Testproject'],
['2', 'Testproject2']]
})
},
{
xtype: 'datefield',
fieldLabel: 'Start',
format: 'Y-M-d',
name: 'startdate',
value: '2009-08-14',
width: 150
},
{
xtype: 'timefield',
fieldLabel: 'Start time',
format: 'H:i',
name: 'starttime',
value: '11:00',
width: 150
},
{
xtype: 'datefield',
fieldLabel: 'End',
format: 'Y-M-d',
name: 'enddate',
value: '2009-08-14',
width: 150
},
{
xtype: 'timefield',
fieldLabel: 'End time',
format: 'H:i',
name: 'endtime',
value: '13:00',
width: 150
},
{
xtype: 'hidden',
id: 'eventID',
name: 'eventID',
value: '112'
}]
}]
}).show();

Animal
14 Aug 2009, 12:50 PM
Wouldn't you want layout:'fit' so that the FormPanel was exactly fitted in the Window, whatever size the Window becomes????? Huh?

Format your code properly. That's unreadable. You'll never maintain that.

Use http://jsbeautifier.org/

roady001
14 Aug 2009, 1:08 PM
I have tried with 'fit' but that does not solve my problem (or makes it worse). The margin is still 0 points to the borders of the Ext.Window in which this form is loaded.

Off-topic: The Ext code is generated by my own server side classes; rest assured that the code is very readable within these classes. However thanks for the link, it is very useful for posting the code more readable in this forum!

roady001
14 Aug 2009, 1:23 PM
Funny how problems tend to resolve themselves within minutes after sharing it in a forum... I spend more than an hour trying to resolve this thing, ultimately ending up posting in this forum. And then the answer by magic entered my brain: padding, not margin!

So for anyone also struggling with this: padding is the way to go! (doh)

padding: '10px 10px 10px 10px' did the trick.

Animal
14 Aug 2009, 1:26 PM
You NEED to use layout: 'fit'.

Animal
14 Aug 2009, 1:26 PM
I assume you mean bodyStyle?

roady001
14 Aug 2009, 1:40 PM
No, not bodyStyle. This is how the 'head' of the form looks like now:

{
xtype: 'form',
id: 'form_event',
title: 'Form',
padding: '10px 10px 10px 10px',
header: false,
mode: 'post',
defaults: {
msgTarget: 'under'
},
buttons: [{
etc. etc. etc.

Animal
14 Aug 2009, 1:41 PM
That will not do anything.

roady001
14 Aug 2009, 2:12 PM
That will not do anything.

No offence (!), but I can only assume you made this remark with non-empirical knowledge (on this part)? ;)

It does work, try it yourself!

Animal
14 Aug 2009, 2:17 PM
Somehow the code



if(Ext.isDefined(this.padding)){
this.body.setStyle('padding', this.body.addUnits(this.padding));
}


has crept into Panel.

When it goe there I don't know because the bodyStyle config has been around for ever. Seems redundant.

Animal
14 Aug 2009, 2:19 PM
Yep. It appeared in 3.0, and was never in the 2.* code.

Animal
14 Aug 2009, 2:32 PM
Being undocumented I would suggest to use the bodyStyle config instead.

And layout: 'fit', obvously.