PDA

View Full Version : FormPanel border



sunco
31 Oct 2009, 10:53 AM
Can somebody please tell me what is wrong with this code ? I want to remove the FormPanel border



var ventana1 = new Ext.Window({
modal: true,
width: 700,
height: 300,
title: 'XXX',
closeAction:'hide',

items: [

new Ext.FormPanel({
frame: true,
bodyBorder: false,
border: false,
hideBorders: true,

width: 686,
defaults: { layout: 'column' },
waitMsgTarget: true,
items: [

{
defaults: { layout: 'form', height: 30 },
items:[
{ columnWidth:.99, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '100%' }] }
]
},{
defaults: { layout: 'form', height: 30 },
items:[
{ columnWidth:.40, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '90%' }] }
]
},{
defaults: { layout: 'form', height: 30 },
items:[
{ columnWidth:.66, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '90%' }] },
{ columnWidth:.33, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '100%' }] }
]
}

],

buttons: [
{ text: ' Guardar', icon: 'images/iconos/guardar.png', minWidth: 80, height: 24 },
{ text: ' Cancelar', icon: 'images/iconos/cerrar.png', minWidth: 80, height: 24 }
]
})

]
});

ventana1.show();


I have another FormPanel with frame:false inside an Ext.Panel with frame:true and the border are gone. But this time, even if i add an Ext.Panel can't make it work

Animal
31 Oct 2009, 11:03 AM
There isn't a border on your FormPanel. You've configured it border: false, so it will not show one.

sunco
31 Oct 2009, 11:22 AM
Did you test the code ? It shows the border

http://sunco.codigoplus.com/border.png

Jaitsu
31 Oct 2009, 11:39 AM
the border is on the child panel of the form

Animal
31 Oct 2009, 11:42 AM
That's the frame.

You did ask for it.

It only does what you ask of it.

sunco
31 Oct 2009, 12:02 PM
If i use frame:false the FormPanel looks very weird. Then how can i remove that ugly border ?

Animal
31 Oct 2009, 1:28 PM
What border?

sunco
31 Oct 2009, 5:12 PM
The border of the frame.. or how can i use a FormPanel on a Window without any border and that looks nice ?

Maybe some trick with a Exp.Panel inside the Window ?

Thanks for listen and being patient with me :">

Animal
1 Nov 2009, 12:01 AM
What "trick" ?

Just put a Panel in a Window with no frame. Style it using regular methods as you like. Where's the mystery?

Like this, just paste the following code into Firebug and run it.:



new Ext.Window({
title: 'Form Window',
height: 400, width: 600,
layout: 'fit',
items: {
xtype: 'form',
bodyCssClass: 'x-border-layout-ct',
bodyStyle: {
padding: '5px'
},
border: false,
items: {
xtype: 'textfield',
fieldLabel: 'A text field'
},
buttons: [{
text: 'Submit'
}]
}
}).show();

sunco
2 Nov 2009, 8:18 AM
Thanks for your help. It works with your code



var ventana1 = new Ext.Window({
modal: true,
width: 700,
height: 300,
title: 'XXX',
closeAction: 'hide',

items: [

new Ext.FormPanel({
bodyCssClass: 'x-border-layout-ct',
border:false,
bodyStyle: {
padding: '7px'
},

width: 686,
height: 270,
defaults: { layout: 'column', border:false, bodyCssClass: 'x-border-layout-ct' },
waitMsgTarget: true,
items: [

{
defaults: { layout: 'form', height: 30, border:false, bodyCssClass: 'x-border-layout-ct' },
items:[
{ columnWidth:.99, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '100%' }] }
]
},{
defaults: { layout: 'form', height: 30, border:false, bodyCssClass: 'x-border-layout-ct' },
items:[
{ columnWidth:.40, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '90%' }] }
]
},{
defaults: { layout: 'form', height: 30, border:false, bodyCssClass: 'x-border-layout-ct' },
items:[
{ columnWidth:.66, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '90%' }] },
{ columnWidth:.33, items: [{ xtype:'textfield', fieldLabel: 'XXX', anchor: '100%' }] }
]
}

],

buttons: [
{ text: ' Guardar', icon: 'images/iconos/guardar.png', minWidth: 80, height: 24 },
{ text: ' Cancelar', icon: 'images/iconos/cerrar.png', minWidth: 80, height: 24 }
]
})

]
});

ventana1.show();