PDA

View Full Version : column layout without a border?



raj_plays
25 Oct 2010, 12:35 AM
23001
Hi,
I want to put a datefield, a spacer and a timefield on the same row but I don't want a border around them.
I created a column layout but I can't do away with the border. Also the spacer does not take effect.


replyForm.add(
{
items: [
{
layout: 'column',
border: false,
bodyStyle: 'align: left',
items: [

{


layout: 'form',
labelAlign: 'left',
labelWidth: 60,
border: false,
items:
[

{


xtype: 'datefield', id: 'date', fieldLabel: 'Start date',
maxLength: 10, format:'Y-m-d', width: 100, value: new Date().clearTime() , allowBlank: false}
]
},
{
xtype: 'spacer', width: 10
},
{
xtype: 'timefield', id: 'time', format:'g A', increment: 60, value: '12 AM',
width: 70, style: {float: 'left'}
}
]
}]
});


Please help

Animal
25 Oct 2010, 12:41 AM
So formatting that so that it is readable, you have



replyForm.add({
items: [{
layout: 'column',
border: false,
bodyStyle: 'align: left',
items: [{
layout: 'form',
labelAlign: 'left',
labelWidth: 60,
items: [{
xtype: 'datefield',
id: 'date',
fieldLabel: 'Start date',
maxLength: 10,
format: 'Y-m-d',
width: 100,
value: new Date().clearTime(),
allowBlank: false
}]
}, {
xtype: 'spacer',
width: 10
}, {
xtype: 'timefield',
id: 'time',
format: 'g A',
increment: 60,
value: '12 AM',
width: 70
}]
}]
});


Why the overnesting?

And why use Panels (The docs TELL you that you'll be getting Panels which do have a border by default)



replyForm.add({
layout: 'column',
border: false,
bodyStyle: 'align: left',
defaultType: 'container', // Hmm?
items: [{
layout: 'form',
labelAlign: 'left',
labelWidth: 60,
border: false,
items: [{
xtype: 'datefield',
id: 'date',
fieldLabel: 'Start date',
maxLength: 10,
format: 'Y-m-d',
width: 100,
value: new Date().clearTime(),
allowBlank: false
}]
}, {
xtype: 'spacer',
width: 10
}, {
xtype: 'timefield',
id: 'time',
format: 'g A',
increment: 60,
value: '12 AM',
width: 70,
style: {
float: 'left'
}
}]
});

Condor
25 Oct 2010, 12:44 AM
Actually, you have 2 panels that should be containers:

replyForm.add({
xtype: 'container',
layout: 'column',
border: false,
bodyStyle: 'align: left',
items: [{
xtype: 'container',
layout: 'form',
labelAlign: 'left',
labelWidth: 60,
border: false,
items: [{
xtype: 'datefield',
id: 'date',
fieldLabel: 'Start date',
maxLength: 10,
format: 'Y-m-d',
width: 100,
value: new Date().clearTime(),
allowBlank: false
}]
}, {
xtype: 'spacer',
width: 10
}, {
xtype: 'timefield',
id: 'time',
format: 'g A',
increment: 60,
value: '12 AM',
width: 70,
style: {
float: 'left'
}
}]
});

Animal
25 Oct 2010, 12:45 AM
Yep. Another forgotten defaultType! :">

raj_plays
25 Oct 2010, 12:51 AM
Thank you, Animal.
Sorry for the lack of formatting.

Is it the case that if default type is not specified, panels are used? And panels have borders that cannot be removed?
My config had border: false...didn't work.

another issue: the spacer does not take effect.

Condor
25 Oct 2010, 1:01 AM
No, border:false does remove the border.

But have a look at your original code. You still have an extra panel that you didn't specify border:false for (which Animal removed, because you didn't actually need that panel).

raj_plays
25 Oct 2010, 3:23 AM
Thank you, Condor.