Changing Dialog Body - How?

[franzisk]

I have this BasicDialog where I dont want margins/paddings in the body property (I am inserting a div to acomodate a form), or I could have the background completely white, but I am not beeing able to do that.


dialogProfileWindow = new Ext.BasicDialog('profile', {
autoCreate: false,
width: '100%',
height: frameHeight,
modal: true,
closable:true,
resizable:false,
draggable:true,
collapsible:false,
title:'Profile Window'
});
Ext.get(dialogProfileWindow.body).applyStyles({backgroundColor:"white", margin:'0px', padding:'0px'});
dialogProfileWindow.body.dom.innerHTML="<div id='profile-form'></div>";


http://www.kooky.com.br/shots/digalog_margins.png

The Ext masters would have any idea how I can change that?

[Animal]

That looks good, it should work.

In the "Hello world" dialog example, I just had to get the dialog's body element, and do



dlgBody.applyStyles({padding:'0px'});


and the padding changed so that there was no padding between it and it's container (the dialog itself)

Of course you don't need Ext.get. the body of a dialog is already an Element. Not that should make a difference. Ext.get passed an Element, returns that Element.

Perhaps some other bit of your code is affecting it.

[tryanDLS]

You really need to take a step back and understand a little about the code you are using/writing.
1) why are you call get() on the body, when the body property already returns an Element?
2) why are you updating via innerHTML, rather than Element.update? The Element object exists to isolate your from programming against the quirks of the dom object - use that functionality to simplify your code.
3) why are you mixing single and double quotes in the same line? Yes, it will work in this case, but it's sloppy programming, and in other cases you might have problems.
4) look at the rendered HTML in firebug - are your styles getting applied?

[franzisk]

You really need to take a step back and understand a little about the code you are using/writing.
1) why are you call get() on the body, when the body property already returns an Element?
That was my mistake, lack of information

2) why are you updating via innerHTML, rather than Element.update? The Element object exists to isolate your from programming against the quirks of the dom object - use that functionality to simplify your code.
Same as before...

3) why are you mixing single and double quotes in the same line? Yes, it will work in this case, but it's sloppy programming, and in other cases you might have problems.
Fixed...

4) look at the rendered HTML in firebug - are your styles getting applied?
They are not, that's the question, why not?


Ok, according to your advice (and Animal) here is the new code, still not clearing the padding in the Dialog body, apart of that I just have the form rendered inside the div I put in the body.


dialogProfileWindow = new Ext.BasicDialog('profile', {
autoCreate: false,
width: '100%',
height: frameHeight,
modal: true,
closable:true,
resizable:false,
draggable:true,
collapsible:false,
title:'Profile Window'
});
dialogProfileWindow.addKeyListener(27, dialogProfileWindow.hide, dialogProfileWindow);
dialogProfileWindow.body.applyStyles({backgroundColor:'white', margin:'0px', padding:'0px'});
dialogProfileWindow.body.update("<div id='profile-form'></div>");
dialogProfileWindow.show();
// this DIV is where I render my dynamic form
Ext.get('profile-form').applyStyles({padding:'5px'}); // this is working

[Animal]

Step through with Firebug, and inspect the document using the HTML tab, and see if the style and layout is changing when you call those methods.

Check if show changes any settings back to the default.

[tryanDLS]

Keep in mind that there's another container wrapping the body involved. If you look at the HTML, you'll see a div with class=x-dlg-bd and above that another with class=x-dlg-dlg-body.

You probably want set your properties on the outer div if you want to completely eliminate the space around the body. You could applyStyles to the dialog.bwrap property in that case.

[franzisk]

Perfect, exactly what I wanted, thank you, you saved the day =D>