View Full Version : Ext.ux.form.FieldGroup: Panelless alt to CheckboxGroup w/ add, remove, insert, etc

11 Apr 2009, 5:57 AM
Demo (http://99thmonkey.org/extjs/examples/fieldgroup/)

Hi all,

After being frustrated with the CheckboxGroup, with its many nested panels, no add / insert / remove / removeAll functionality, I decided to write my own version, which also supports normal fields.

There is absolutely no panels used in the making of the FieldGroup, so no needless nesting or rendering (I swear it renders faster than CheckboxGroup, totally anecdotal though). In testing in my own Ext apps I was able to seamlessly swap out instances of CheckboxGroup & RadioGroup. However, your mileage may vary.

FieldGroup also support TextFields, DateFields etc, it supports fieldLabels with ease and the fieldTpl can be configured (though largely untested). Please leave observations / bugs / requests in this thread.

Zip file is made to drop right into a folder inside Ext examples. I'll be writing up some basic docs, but see the example to see how it works.

2009-06-28 Updated to fix IE rendering bug.


columns: Number/Array of sizes - Specify number of columns OR an Array of sizes, sizes can be in columnWidth format (eg .3) or px string (eg '100px') -- defaults to 2

columnHeaders: Array of strings - Column headers, eg: ['Header 1', 'Header 2']

columnStyle: String - Custom CSS styles to be applied to the table columns. Defaults to 'vertical-align:top;padding-left:5px;' [Optional]

vertical: Boolean - True to distribute contained controls across columns, completely filling each column top to bottom before starting on the next column. Defaults to false.

labelSeperator: String - Default fieldLabel seperator.

blankText: String - String to display when invalid.

defaultType: String xtype - Default field, defaults to 'checkbox'


add(Ext.Component/Object component) - adds a component to the FieldGroup, returns said component.

remove( string id / component index / component, autoDestroy) - removes component from FieldGroup, destroys if autoDestroy is set to true or the fieldGroups autoDestroy config if blank.

insert(Number index, Ext.Component/Object component) - inserts component at desired position

moveField(Number index/Component/String id, Number index) - Moves a field from its current position to the position specified

getSelected() - Returns selected / ticked items.


beforeadd, add, beforeremove, remove - all work as expected.

afterlayout : ( FieldGroup this ) Fires after the fields have been organised.

beforemovefield : ( FieldGroup this, field component, from number, to number ) Fires before a field is moved. return false to halt.

movefield : ( FieldGroup this, field component, from number, to number ) Fires after a field has been moved.

Demo (http://99thmonkey.org/extjs/examples/fieldgroup/)