Multiselect 'CheckboxSelect' control

Sorry for double post (this post originaly created on Ext 2 subforum, but control based on Ext 3 - I think that should works on ver 2 but never tested), it's my mistake - that topic being unmonitored in the future.

Hi, this is a composite control using a combobox for selecting items and checkboxes for displaying and unselecting preivously selected items. This is great for users because their selections are visible but not reserve a lot of space (like a list) and very easy to use (not need any knowledge to handle). Component handled like any other form fields and able to load initial values from remote server in a practical way using a simple array.
Why this component created? Because most of my useres have a lot of problem with Ctrl-click selection and default auto multiselection. Another reason that I don`t like to see list controls in a complex layout. My goal is a practial, intuitive and easily oversightable solution.

Warning! This component isn`t a well-tested, it`s under developed and seems it`s works. I`m only tested on FF3. Code documentation is actual but has some formal bug which will be fixed if I have enough time to it, sorry.

Usability tips:

Select tags - a very visible implementation, user could type one of the available tags, tag added if return pressed, checkbox with tag appears.

Any case where there are so many items available, list seems like unlimited, and we do not want to force the user to "scroll and scroll and select one or some" - this control should be a very useful solution because user colud select items very easily and will alvays see what he/she choosed.

/** * @class Ext.sm.Form.CheckboxSelect * @extends Ext.Panel * <p><b>Represent a composite control to realize special multiselection.</b></p> * <p>This control displays an Ext.form.ComboBox, and a panel below the combobox. * If you select an item from the combobox, a checked checkbox appears within the * panel. User can uncheck a checkbox, then checkbox disappears (going to remove).</p> * <p>You can configure fully the ComboBox as usual within the {@link #comboConfig}. * Checkboxes are displayed in columns, next to each other. On default the control * has three columns for that, but you can override this by set the {@link #checkboxColumns} * configuration setting. Checkbox values parsed as array of values. For example you * have a ComboBox with items ['first'='One', 'second'='Two'] (value=text) and {@link name} * has the value 'numbers' - now if you select all items, you have two checkboxes on * the form, the parsed result is similar: <i>...numbersItem[]=first&numbersItem[]=second</i>.</p> * <p>The code below illustrates how the component works:</p><pre><code>var win = new Ext.Window({ title : 'Test', items : [{ xtype : 'form', autoHeight : true, ctCls: 'testForm', items : [{ xtype : 'checkboxselect', name : 'numbers', hiddenName: 'numbersRaw', fieldLabel : 'Test', comboConfig : { store : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four']] } }], buttons: [{ text: 'Save', handler: function() { var fp = this.findParentByType('form');

/** * @cfg {String} fieldClass The default CSS class for the field (defaults * to "x-form-field"). Mapped to ComboBox. */

/** * @cfg {String} focusClass The CSS class to use when the field receives * focus (defaults to "x-form-focus"). Mapped to ComboBox. */

/** * @cfg {String} invalidClass The CSS class to use when marking a field * invalid (defaults to "x-form-invalid"). */invalidClass: 'x-form-invalid',

/** * @cfg {String} invalidText The error text to use when marking a field * invalid and no message is provided (defaults to "The value in this field * is invalid"). Mapped to ComboBox. */

/** * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a * validation message under the field (defaults to 'normal'). */msgFx: 'normal',

/** * @cfg {String} msgTarget The location where error text should display. * Should be one of the following values (defaults to 'qtip'): * <pre>Value Description----------- ----------------------------------------------------------------------qtip Display a quick tip when the user hovers over the fieldtitle Display a default browser title attribute popupunder Add a block div beneath the field containing the error textside Add an error icon to the right of the field with a popup on hover[element id] Add the error text directly to the innerHTML of the specified element</pre> */msgTarget : 'qtip',

/** * @cfg {String} name Name of Ext.form.Checkbox components. A * default 'unnamed' set, but you must change this if you want a normal result * on the server-side, or use this field by form load. */name: 'unnamed',

/** * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML * (defaults to false) -- Note: this only sets the element's readOnly DOM * attribute. <b>This is mapped to all subfields!</b> */readOnly : false,

/** * @cfg {Number} tabIndex The tabIndex for this field. Note this only * applies to fields that are rendered, not those which are built via * applyTo (defaults to undefined). Mapped to ComboBox. */

/** * @cfg {Boolean} validateOnBlur Whether the field should validate when * it loses focus (defaults to true). Mapped to ComboBox. */

/** * @cfg {String/Boolean} validationEvent The event that should initiate * field validation. Set to false to disable automatic validation (defaults * to "keyup"). Mapped to ComboBox. */

/** * @cfg {Mixed} value A value to initialize this field with (defaults to * undefined). Mapped to ComboBox. */

// private - indicates that this is a form field for BasicForm.isFormField: true,

/** * @cfg {String} hiddenName * This is the name of used hidden field for storing raw value for correctly * submitting this field. If this has an empty (null, undefined, etc) value, * hidden field will not created. Default is undefined. */

/** * @cfg {Object} comboConfig * This is the config of component`s ComboBox, here you can set the fieldLabel and * store etc on it. Default settings are: typeAhead=true, forceSelection=true. */comboConfig : {},

/** * Returns the raw data value which may or may not be a valid, defined value. * To return a normalized value see {@link #getValue}. This value on this field * is a dynamic set of values like 'value[]=1&value[]=2&value[]=3'. * @return {String} value The field value */getRawValue : function() { var v = this.getSelectedValues(); var ra = []; var result;

/** * <p>Returns true if the value of this Field has been changed from its original value, * and is not disabled.</p> * <p>Note that if the owning {@link Ext.form.BasicForm form} was configured with * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad} * then the <i>original value</i> is updated when the values are loaded by * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#setValues setValues}.</p> * @return {Boolean} True if this field has been changed from its original value (and * is not disabled), false otherwise. */isDirty : function() { if (this.disabled) { return false; }

/** * Resets the current field value to the originally loaded value and clears * any validation messages. * See {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad} */reset : function() {this.clearInvalid();this.combo.reset();this.removeAllCheckboxes();this.setValue(this.originalValue); },

/** * Sets a data value into the field and validates it. To set the value directly * without validation see {@link #setRawValue}. Applied values are type of * String and Array. * @param {String/Array} value The value to set * @return {Ext.form.Field} this */setValue : function(value) {this.value = '';