Ext.ux.form.Spacer

[mystix]

Needed a spacer xtype for use in FormPanels, so i whipped up a simple now-simplified one:


Ext.ns('Ext.ux.form'); // set up Ext.ux.form namespace

/**
* @class Ext.ux.form.Spacer
* @extends Ext.BoxComponent
* Utility spacer class.
* @constructor
* @param {Number} height (optional) Spacer height in pixels (defaults to 22).
*/
Ext.ux.form.Spacer = Ext.extend(Ext.BoxComponent, {
height: 22,
autoEl: 'div' // thanks @jack =)
});
Ext.reg('spacer', Ext.ux.form.Spacer);


Example usage (adapted from examples/form/dynamic.html. additions in red):


var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
xtype: 'spacer'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);


Screenshot:
http://img143.imageshack.us/img143/7531/extuxformspacerzu6.png

enjoy ;)

[edit 1]
p.s. i hope noone else has done this before... :-?
aww shucks, someone did beat me to it... http://extjs.com/forum/showthread.php?t=26541
BUT mine's more elegant (???) :> :))

[edit 2]
as expected, i'll be eating my own words. :)
to anyone who cares to use this, plugin code's been updated

[dawesi]

I just use an Ext.Panel({border:false,frame:false:height:20}); I'm sure there's an even easier way, but thought i'd share my 'one' of many ways to do this...

you could also put a margin-bottom: 40 style on the previous form item's container...

[jack.slocum]

You might try:

{xtype: 'box', autoEl: 'div', height:20}

or:

{xtype: 'box', autoEl: {cls:'some-spacer-class'}}

or to keep the simplicity of the xtype u had:



Ext.ux.form.Spacer = Ext.extend(Ext.BoxComponent, {
height: 22,
autoEl: 'div'
});
Ext.reg('spacer', Ext.ux.form.Spacer);

[Animal]

I don't mean to snipe, but isn't this what CSS settings like margins and padding are for rather than inserting block elements?



var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last',
style: {
marginBottom: '22px'
}
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

[mystix]

@jack: nice trick! thanks for the tip :">

@animal: no worries. i learn best when sniped :)
i think it's still handy though when Field dimensions (specifically height) are specified via the anchor config.
this way spacers can grow / shrink to match the height of other Fields on the same line...
i'm not sure if this is possible via css alone.
correct me if i'm wrong pls.

@dawesi: a Panel's overkill for a spacer imo.
but as jack + animal have pointed out, so's mine :>

[mystix]

and here's something completely off-topic:

after submitting my previous reply, i saw this:
http://img245.imageshack.us/img245/7572/weirdls2.png

is anyone else experiencing weird site displays? :-?

[rflosi]

You should be able use the 'cls' attribute on the TextField to add a class to the element so you don't have to hard code a height/margin/whatever you're doing.


{
fieldLabel: 'Last Name',
name: 'last',
cls: 'add-bottom-margin'
}