Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / ux / MultiSelect.js
index d8e9d58..dfc3f41 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
-Ext.ns('Ext.ux.form');\r
-\r
-/**\r
- * @class Ext.ux.form.MultiSelect\r
- * @extends Ext.form.Field\r
- * A control that allows selection and form submission of multiple list items.\r
- *\r
- *  @history\r
- *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- *    2008-06-19 bpm Docs and demo code clean up\r
- *\r
- * @constructor\r
- * Create a new MultiSelect\r
- * @param {Object} config Configuration options\r
- * @xtype multiselect\r
- */\r
-Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {\r
-    /**\r
-     * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
-     */\r
-    /**\r
-     * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.\r
-     */\r
-    /**\r
-     * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).\r
-     */\r
-    /**\r
-     * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).\r
-     */\r
-    /**\r
-     * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).\r
-     */\r
-    ddReorder:false,\r
-    /**\r
-     * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a\r
-     * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
-     */\r
-    /**\r
-     * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled\r
-     * (use for lists which are sorted, defaults to false).\r
-     */\r
-    appendOnly:false,\r
-    /**\r
-     * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
-     */\r
-    width:100,\r
-    /**\r
-     * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
-     */\r
-    height:100,\r
-    /**\r
-     * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
-     */\r
-    displayField:0,\r
-    /**\r
-     * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
-     */\r
-    valueField:1,\r
-    /**\r
-     * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no\r
-     * selection (defaults to true).\r
-     */\r
-    allowBlank:true,\r
-    /**\r
-     * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).\r
-     */\r
-    minSelections:0,\r
-    /**\r
-     * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).\r
-     */\r
-    maxSelections:Number.MAX_VALUE,\r
-    /**\r
-     * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
-     * {@link Ext.form.TextField#blankText}.\r
-     */\r
-    blankText:Ext.form.TextField.prototype.blankText,\r
-    /**\r
-     * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}\r
-     * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.\r
-     */\r
-    minSelectionsText:'Minimum {0} item(s) required',\r
-    /**\r
-     * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}\r
-     * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.\r
-     */\r
-    maxSelectionsText:'Maximum {0} item(s) allowed',\r
-    /**\r
-     * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
-     * (defaults to ',').\r
-     */\r
-    delimiter:',',\r
-    /**\r
-     * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).\r
-     * Acceptable values for this property are:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b>any {@link Ext.data.Store Store} subclass</b></li>\r
-     * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">\r
-     * A 1-dimensional array will automatically be expanded (each array item will be the combo\r
-     * {@link #valueField value} and {@link #displayField text})</div></li>\r
-     * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">\r
-     * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\r
-     * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.\r
-     * </div></li></ul></div></li></ul></div>\r
-     */\r
-\r
-    // private\r
-    defaultAutoCreate : {tag: "div"},\r
-\r
-    // private\r
-    initComponent: function(){\r
-        Ext.ux.form.MultiSelect.superclass.initComponent.call(this);\r
-\r
-        if(Ext.isArray(this.store)){\r
-            if (Ext.isArray(this.store[0])){\r
-                this.store = new Ext.data.ArrayStore({\r
-                    fields: ['value','text'],\r
-                    data: this.store\r
-                });\r
-                this.valueField = 'value';\r
-            }else{\r
-                this.store = new Ext.data.ArrayStore({\r
-                    fields: ['text'],\r
-                    data: this.store,\r
-                    expandData: true\r
-                });\r
-                this.valueField = 'text';\r
-            }\r
-            this.displayField = 'text';\r
-        } else {\r
-            this.store = Ext.StoreMgr.lookup(this.store);\r
-        }\r
-\r
-        this.addEvents({\r
-            'dblclick' : true,\r
-            'click' : true,\r
-            'change' : true,\r
-            'drop' : true\r
-        });\r
-    },\r
-\r
-    // private\r
-    onRender: function(ct, position){\r
-        Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);\r
-\r
-        var fs = this.fs = new Ext.form.FieldSet({\r
-            renderTo: this.el,\r
-            title: this.legend,\r
-            height: this.height,\r
-            width: this.width,\r
-            style: "padding:0;",\r
-            tbar: this.tbar\r
-        });\r
-        fs.body.addClass('ux-mselect');\r
-\r
-        this.view = new Ext.ListView({\r
-            multiSelect: true,\r
-            store: this.store,\r
-            columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],\r
-            hideHeaders: true\r
-        });\r
-\r
-        fs.add(this.view);\r
-\r
-        this.view.on('click', this.onViewClick, this);\r
-        this.view.on('beforeclick', this.onViewBeforeClick, this);\r
-        this.view.on('dblclick', this.onViewDblClick, this);\r
-\r
-        this.hiddenName = this.name || Ext.id();\r
-        var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };\r
-        this.hiddenField = this.el.createChild(hiddenTag);\r
-        this.hiddenField.dom.disabled = this.hiddenName != this.name;\r
-        fs.doLayout();\r
-    },\r
-\r
-    // private\r
-    afterRender: function(){\r
-        Ext.ux.form.MultiSelect.superclass.afterRender.call(this);\r
-\r
-        if (this.ddReorder && !this.dragGroup && !this.dropGroup){\r
-            this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();\r
-        }\r
-\r
-        if (this.draggable || this.dragGroup){\r
-            this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {\r
-                ddGroup: this.dragGroup\r
-            });\r
-        }\r
-        if (this.droppable || this.dropGroup){\r
-            this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {\r
-                ddGroup: this.dropGroup\r
-            });\r
-        }\r
-    },\r
-\r
-    // private\r
-    onViewClick: function(vw, index, node, e) {\r
-        this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
-        this.hiddenField.dom.value = this.getValue();\r
-        this.fireEvent('click', this, e);\r
-        this.validate();\r
-    },\r
-\r
-    // private\r
-    onViewBeforeClick: function(vw, index, node, e) {\r
-        if (this.disabled) {return false;}\r
-    },\r
-\r
-    // private\r
-    onViewDblClick : function(vw, index, node, e) {\r
-        return this.fireEvent('dblclick', vw, index, node, e);\r
-    },\r
-\r
-    /**\r
-     * Returns an array of data values for the selected items in the list. The values will be separated\r
-     * by {@link #delimiter}.\r
-     * @return {Array} value An array of string data values\r
-     */\r
-    getValue: function(valueField){\r
-        var returnArray = [];\r
-        var selectionsArray = this.view.getSelectedIndexes();\r
-        if (selectionsArray.length == 0) {return '';}\r
-        for (var i=0; i<selectionsArray.length; i++) {\r
-            returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));\r
-        }\r
-        return returnArray.join(this.delimiter);\r
-    },\r
-\r
-    /**\r
-     * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
-     * @param {String/Array} values The values to set\r
-     */\r
-    setValue: function(values) {\r
-        var index;\r
-        var selections = [];\r
-        this.view.clearSelections();\r
-        this.hiddenField.dom.value = '';\r
-\r
-        if (!values || (values == '')) { return; }\r
-\r
-        if (!Ext.isArray(values)) { values = values.split(this.delimiter); }\r
-        for (var i=0; i<values.length; i++) {\r
-            index = this.view.store.indexOf(this.view.store.query(this.valueField,\r
-                new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
-            selections.push(index);\r
-        }\r
-        this.view.select(selections);\r
-        this.hiddenField.dom.value = this.getValue();\r
-        this.validate();\r
-    },\r
-\r
-    // inherit docs\r
-    reset : function() {\r
-        this.setValue('');\r
-    },\r
-\r
-    // inherit docs\r
-    getRawValue: function(valueField) {\r
-        var tmp = this.getValue(valueField);\r
-        if (tmp.length) {\r
-            tmp = tmp.split(this.delimiter);\r
-        }\r
-        else {\r
-            tmp = [];\r
-        }\r
-        return tmp;\r
-    },\r
-\r
-    // inherit docs\r
-    setRawValue: function(values){\r
-        setValue(values);\r
-    },\r
-\r
-    // inherit docs\r
-    validateValue : function(value){\r
-        if (value.length < 1) { // if it has no value\r
-             if (this.allowBlank) {\r
-                 this.clearInvalid();\r
-                 return true;\r
-             } else {\r
-                 this.markInvalid(this.blankText);\r
-                 return false;\r
-             }\r
-        }\r
-        if (value.length < this.minSelections) {\r
-            this.markInvalid(String.format(this.minSelectionsText, this.minSelections));\r
-            return false;\r
-        }\r
-        if (value.length > this.maxSelections) {\r
-            this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));\r
-            return false;\r
-        }\r
-        return true;\r
-    },\r
-\r
-    // inherit docs\r
-    disable: function(){\r
-        this.disabled = true;\r
-        this.hiddenField.dom.disabled = true;\r
-        this.fs.disable();\r
-    },\r
-\r
-    // inherit docs\r
-    enable: function(){\r
-        this.disabled = false;\r
-        this.hiddenField.dom.disabled = false;\r
-        this.fs.enable();\r
-    },\r
-\r
-    // inherit docs\r
-    destroy: function(){\r
-        Ext.destroy(this.fs, this.dragZone, this.dropZone);\r
-        Ext.ux.form.MultiSelect.superclass.destroy.call(this);\r
-    }\r
-});\r
-\r
-\r
-Ext.reg('multiselect', Ext.ux.form.MultiSelect);\r
-\r
-//backwards compat\r
-Ext.ux.Multiselect = Ext.ux.form.MultiSelect;\r
-\r
-\r
-Ext.ux.form.MultiSelect.DragZone = function(ms, config){\r
-    this.ms = ms;\r
-    this.view = ms.view;\r
-    var ddGroup = config.ddGroup || 'MultiselectDD';\r
-    var dd;\r
-    if (Ext.isArray(ddGroup)){\r
-        dd = ddGroup.shift();\r
-    } else {\r
-        dd = ddGroup;\r
-        ddGroup = null;\r
-    }\r
-    Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
-    this.setDraggable(ddGroup);\r
-};\r
-\r
-Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {\r
-    onInitDrag : function(x, y){\r
-        var el = Ext.get(this.dragData.ddel.cloneNode(true));\r
-        this.proxy.update(el.dom);\r
-        el.setWidth(el.child('em').getWidth());\r
-        this.onStartDrag(x, y);\r
-        return true;\r
-    },\r
-\r
-    // private\r
-    collectSelection: function(data) {\r
-        data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();\r
-        var i = 0;\r
-        this.view.store.each(function(rec){\r
-            if (this.view.isSelected(i)) {\r
-                var n = this.view.getNode(i);\r
-                var dragNode = n.cloneNode(true);\r
-                dragNode.id = Ext.id();\r
-                data.ddel.appendChild(dragNode);\r
-                data.records.push(this.view.store.getAt(i));\r
-                data.viewNodes.push(n);\r
-            }\r
-            i++;\r
-        }, this);\r
-    },\r
-\r
-    // override\r
-    onEndDrag: function(data, e) {\r
-        var d = Ext.get(this.dragData.ddel);\r
-        if (d && d.hasClass("multi-proxy")) {\r
-            d.remove();\r
-        }\r
-    },\r
-\r
-    // override\r
-    getDragData: function(e){\r
-        var target = this.view.findItemFromChild(e.getTarget());\r
-        if(target) {\r
-            if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {\r
-                this.view.select(target);\r
-                this.ms.setValue(this.ms.getValue());\r
-            }\r
-            if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;\r
-            var dragData = {\r
-                sourceView: this.view,\r
-                viewNodes: [],\r
-                records: []\r
-            };\r
-            if (this.view.getSelectionCount() == 1) {\r
-                var i = this.view.getSelectedIndexes()[0];\r
-                var n = this.view.getNode(i);\r
-                dragData.viewNodes.push(dragData.ddel = n);\r
-                dragData.records.push(this.view.store.getAt(i));\r
-                dragData.repairXY = Ext.fly(n).getXY();\r
-            } else {\r
-                dragData.ddel = document.createElement('div');\r
-                dragData.ddel.className = 'multi-proxy';\r
-                this.collectSelection(dragData);\r
-            }\r
-            return dragData;\r
-        }\r
-        return false;\r
-    },\r
-\r
-    // override the default repairXY.\r
-    getRepairXY : function(e){\r
-        return this.dragData.repairXY;\r
-    },\r
-\r
-    // private\r
-    setDraggable: function(ddGroup){\r
-        if (!ddGroup) return;\r
-        if (Ext.isArray(ddGroup)) {\r
-            Ext.each(ddGroup, this.setDraggable, this);\r
-            return;\r
-        }\r
-        this.addToGroup(ddGroup);\r
-    }\r
-});\r
-\r
-Ext.ux.form.MultiSelect.DropZone = function(ms, config){\r
-    this.ms = ms;\r
-    this.view = ms.view;\r
-    var ddGroup = config.ddGroup || 'MultiselectDD';\r
-    var dd;\r
-    if (Ext.isArray(ddGroup)){\r
-        dd = ddGroup.shift();\r
-    } else {\r
-        dd = ddGroup;\r
-        ddGroup = null;\r
-    }\r
-    Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
-    this.setDroppable(ddGroup);\r
-};\r
-\r
-Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {\r
-    /**\r
-     * Part of the Ext.dd.DropZone interface. If no target node is found, the\r
-     * whole Element becomes the target, and this causes the drop gesture to append.\r
-     */\r
-    getTargetFromEvent : function(e) {\r
-        var target = e.getTarget();\r
-        return target;\r
-    },\r
-\r
-    // private\r
-    getDropPoint : function(e, n, dd){\r
-        if (n == this.ms.fs.body.dom) { return "below"; }\r
-        var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;\r
-        var c = t + (b - t) / 2;\r
-        var y = Ext.lib.Event.getPageY(e);\r
-        if(y <= c) {\r
-            return "above";\r
-        }else{\r
-            return "below";\r
-        }\r
-    },\r
-\r
-    // private\r
-    isValidDropPoint: function(pt, n, data) {\r
-        if (!data.viewNodes || (data.viewNodes.length != 1)) {\r
-            return true;\r
-        }\r
-        var d = data.viewNodes[0];\r
-        if (d == n) {\r
-            return false;\r
-        }\r
-        if ((pt == "below") && (n.nextSibling == d)) {\r
-            return false;\r
-        }\r
-        if ((pt == "above") && (n.previousSibling == d)) {\r
-            return false;\r
-        }\r
-        return true;\r
-    },\r
-\r
-    // override\r
-    onNodeEnter : function(n, dd, e, data){\r
-        return false;\r
-    },\r
-\r
-    // override\r
-    onNodeOver : function(n, dd, e, data){\r
-        var dragElClass = this.dropNotAllowed;\r
-        var pt = this.getDropPoint(e, n, dd);\r
-        if (this.isValidDropPoint(pt, n, data)) {\r
-            if (this.ms.appendOnly) {\r
-                return "x-tree-drop-ok-below";\r
-            }\r
-\r
-            // set the insert point style on the target node\r
-            if (pt) {\r
-                var targetElClass;\r
-                if (pt == "above"){\r
-                    dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";\r
-                    targetElClass = "x-view-drag-insert-above";\r
-                } else {\r
-                    dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";\r
-                    targetElClass = "x-view-drag-insert-below";\r
-                }\r
-                if (this.lastInsertClass != targetElClass){\r
-                    Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);\r
-                    this.lastInsertClass = targetElClass;\r
-                }\r
-            }\r
-        }\r
-        return dragElClass;\r
-    },\r
-\r
-    // private\r
-    onNodeOut : function(n, dd, e, data){\r
-        this.removeDropIndicators(n);\r
-    },\r
-\r
-    // private\r
-    onNodeDrop : function(n, dd, e, data){\r
-        if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {\r
-            return false;\r
-        }\r
-        var pt = this.getDropPoint(e, n, dd);\r
-        if (n != this.ms.fs.body.dom)\r
-            n = this.view.findItemFromChild(n);\r
-\r
-        if(this.ms.appendOnly) {\r
-            insertAt = this.view.store.getCount();\r
-        } else {\r
-            insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);\r
-            if (pt == "below") {\r
-                insertAt++;\r
-            }\r
-        }\r
-\r
-        var dir = false;\r
-\r
-        // Validate if dragging within the same MultiSelect\r
-        if (data.sourceView == this.view) {\r
-            // If the first element to be inserted below is the target node, remove it\r
-            if (pt == "below") {\r
-                if (data.viewNodes[0] == n) {\r
-                    data.viewNodes.shift();\r
-                }\r
-            } else {  // If the last element to be inserted above is the target node, remove it\r
-                if (data.viewNodes[data.viewNodes.length - 1] == n) {\r
-                    data.viewNodes.pop();\r
-                }\r
-            }\r
-\r
-            // Nothing to drop...\r
-            if (!data.viewNodes.length) {\r
-                return false;\r
-            }\r
-\r
-            // If we are moving DOWN, then because a store.remove() takes place first,\r
-            // the insertAt must be decremented.\r
-            if (insertAt > this.view.store.indexOf(data.records[0])) {\r
-                dir = 'down';\r
-                insertAt--;\r
-            }\r
-        }\r
-\r
-        for (var i = 0; i < data.records.length; i++) {\r
-            var r = data.records[i];\r
-            if (data.sourceView) {\r
-                data.sourceView.store.remove(r);\r
-            }\r
-            this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);\r
-            var si = this.view.store.sortInfo;\r
-            if(si){\r
-                this.view.store.sort(si.field, si.direction);\r
-            }\r
-        }\r
-        return true;\r
-    },\r
-\r
-    // private\r
-    removeDropIndicators : function(n){\r
-        if(n){\r
-            Ext.fly(n).removeClass([\r
-                "x-view-drag-insert-above",\r
-                "x-view-drag-insert-left",\r
-                "x-view-drag-insert-right",\r
-                "x-view-drag-insert-below"]);\r
-            this.lastInsertClass = "_noclass";\r
-        }\r
-    },\r
-\r
-    // private\r
-    setDroppable: function(ddGroup){\r
-        if (!ddGroup) return;\r
-        if (Ext.isArray(ddGroup)) {\r
-            Ext.each(ddGroup, this.setDroppable, this);\r
-            return;\r
-        }\r
-        this.addToGroup(ddGroup);\r
-    }\r
-});\r
+Ext.ns('Ext.ux.form');
+
+/**
+ * @class Ext.ux.form.MultiSelect
+ * @extends Ext.form.Field
+ * A control that allows selection and form submission of multiple list items.
+ *
+ *  @history
+ *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
+ *    2008-06-19 bpm Docs and demo code clean up
+ *
+ * @constructor
+ * Create a new MultiSelect
+ * @param {Object} config Configuration options
+ * @xtype multiselect
+ */
+Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {
+    /**
+     * @cfg {String} legend Wraps the object with a fieldset and specified legend.
+     */
+    /**
+     * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
+     */
+    /**
+     * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
+     */
+    /**
+     * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
+     */
+    /**
+     * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
+     */
+    ddReorder:false,
+    /**
+     * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
+     * toolbar config, or an array of buttons/button configs to be added to the toolbar.
+     */
+    /**
+     * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
+     * (use for lists which are sorted, defaults to false).
+     */
+    appendOnly:false,
+    /**
+     * @cfg {Number} width Width in pixels of the control (defaults to 100).
+     */
+    width:100,
+    /**
+     * @cfg {Number} height Height in pixels of the control (defaults to 100).
+     */
+    height:100,
+    /**
+     * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
+     */
+    displayField:0,
+    /**
+     * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
+     */
+    valueField:1,
+    /**
+     * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
+     * selection (defaults to true).
+     */
+    allowBlank:true,
+    /**
+     * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
+     */
+    minSelections:0,
+    /**
+     * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
+     */
+    maxSelections:Number.MAX_VALUE,
+    /**
+     * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
+     * {@link Ext.form.TextField#blankText}.
+     */
+    blankText:Ext.form.TextField.prototype.blankText,
+    /**
+     * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
+     * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.
+     */
+    minSelectionsText:'Minimum {0} item(s) required',
+    /**
+     * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
+     * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.
+     */
+    maxSelectionsText:'Maximum {0} item(s) allowed',
+    /**
+     * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
+     * (defaults to ',').
+     */
+    delimiter:',',
+    /**
+     * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
+     * Acceptable values for this property are:
+     * <div class="mdetail-params"><ul>
+     * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
+     * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
+     * <div class="mdetail-params"><ul>
+     * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
+     * A 1-dimensional array will automatically be expanded (each array item will be the combo
+     * {@link #valueField value} and {@link #displayField text})</div></li>
+     * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
+     * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
+     * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
+     * </div></li></ul></div></li></ul></div>
+     */
+
+    // private
+    defaultAutoCreate : {tag: "div"},
+
+    // private
+    initComponent: function(){
+        Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
+
+        if(Ext.isArray(this.store)){
+            if (Ext.isArray(this.store[0])){
+                this.store = new Ext.data.ArrayStore({
+                    fields: ['value','text'],
+                    data: this.store
+                });
+                this.valueField = 'value';
+            }else{
+                this.store = new Ext.data.ArrayStore({
+                    fields: ['text'],
+                    data: this.store,
+                    expandData: true
+                });
+                this.valueField = 'text';
+            }
+            this.displayField = 'text';
+        } else {
+            this.store = Ext.StoreMgr.lookup(this.store);
+        }
+
+        this.addEvents({
+            'dblclick' : true,
+            'click' : true,
+            'change' : true,
+            'drop' : true
+        });
+    },
+
+    // private
+    onRender: function(ct, position){
+        Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
+
+        var fs = this.fs = new Ext.form.FieldSet({
+            renderTo: this.el,
+            title: this.legend,
+            height: this.height,
+            width: this.width,
+            style: "padding:0;",
+            tbar: this.tbar
+        });
+        fs.body.addClass('ux-mselect');
+
+        this.view = new Ext.ListView({
+            multiSelect: true,
+            store: this.store,
+            columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
+            hideHeaders: true
+        });
+
+        fs.add(this.view);
+
+        this.view.on('click', this.onViewClick, this);
+        this.view.on('beforeclick', this.onViewBeforeClick, this);
+        this.view.on('dblclick', this.onViewDblClick, this);
+
+        this.hiddenName = this.name || Ext.id();
+        var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
+        this.hiddenField = this.el.createChild(hiddenTag);
+        this.hiddenField.dom.disabled = this.hiddenName != this.name;
+        fs.doLayout();
+    },
+
+    // private
+    afterRender: function(){
+        Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
+
+        if (this.ddReorder && !this.dragGroup && !this.dropGroup){
+            this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
+        }
+
+        if (this.draggable || this.dragGroup){
+            this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
+                ddGroup: this.dragGroup
+            });
+        }
+        if (this.droppable || this.dropGroup){
+            this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
+                ddGroup: this.dropGroup
+            });
+        }
+    },
+
+    // private
+    onViewClick: function(vw, index, node, e) {
+        this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+        this.hiddenField.dom.value = this.getValue();
+        this.fireEvent('click', this, e);
+        this.validate();
+    },
+
+    // private
+    onViewBeforeClick: function(vw, index, node, e) {
+        if (this.disabled || this.readOnly) {
+            return false;
+        }
+    },
+
+    // private
+    onViewDblClick : function(vw, index, node, e) {
+        return this.fireEvent('dblclick', vw, index, node, e);
+    },
+
+    /**
+     * Returns an array of data values for the selected items in the list. The values will be separated
+     * by {@link #delimiter}.
+     * @return {Array} value An array of string data values
+     */
+    getValue: function(valueField){
+        var returnArray = [];
+        var selectionsArray = this.view.getSelectedIndexes();
+        if (selectionsArray.length == 0) {return '';}
+        for (var i=0; i<selectionsArray.length; i++) {
+            returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
+        }
+        return returnArray.join(this.delimiter);
+    },
+
+    /**
+     * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
+     * @param {String/Array} values The values to set
+     */
+    setValue: function(values) {
+        var index;
+        var selections = [];
+        this.view.clearSelections();
+        this.hiddenField.dom.value = '';
+
+        if (!values || (values == '')) { return; }
+
+        if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
+        for (var i=0; i<values.length; i++) {
+            index = this.view.store.indexOf(this.view.store.query(this.valueField,
+                new RegExp('^' + values[i] + '$', "i")).itemAt(0));
+            selections.push(index);
+        }
+        this.view.select(selections);
+        this.hiddenField.dom.value = this.getValue();
+        this.validate();
+    },
+
+    // inherit docs
+    reset : function() {
+        this.setValue('');
+    },
+
+    // inherit docs
+    getRawValue: function(valueField) {
+        var tmp = this.getValue(valueField);
+        if (tmp.length) {
+            tmp = tmp.split(this.delimiter);
+        }
+        else {
+            tmp = [];
+        }
+        return tmp;
+    },
+
+    // inherit docs
+    setRawValue: function(values){
+        setValue(values);
+    },
+
+    // inherit docs
+    validateValue : function(value){
+        if (value.length < 1) { // if it has no value
+             if (this.allowBlank) {
+                 this.clearInvalid();
+                 return true;
+             } else {
+                 this.markInvalid(this.blankText);
+                 return false;
+             }
+        }
+        if (value.length < this.minSelections) {
+            this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
+            return false;
+        }
+        if (value.length > this.maxSelections) {
+            this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
+            return false;
+        }
+        return true;
+    },
+
+    // inherit docs
+    disable: function(){
+        this.disabled = true;
+        this.hiddenField.dom.disabled = true;
+        this.fs.disable();
+    },
+
+    // inherit docs
+    enable: function(){
+        this.disabled = false;
+        this.hiddenField.dom.disabled = false;
+        this.fs.enable();
+    },
+
+    // inherit docs
+    destroy: function(){
+        Ext.destroy(this.fs, this.dragZone, this.dropZone);
+        Ext.ux.form.MultiSelect.superclass.destroy.call(this);
+    }
+});
+
+
+Ext.reg('multiselect', Ext.ux.form.MultiSelect);
+
+//backwards compat
+Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
+
+
+Ext.ux.form.MultiSelect.DragZone = function(ms, config){
+    this.ms = ms;
+    this.view = ms.view;
+    var ddGroup = config.ddGroup || 'MultiselectDD';
+    var dd;
+    if (Ext.isArray(ddGroup)){
+        dd = ddGroup.shift();
+    } else {
+        dd = ddGroup;
+        ddGroup = null;
+    }
+    Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
+    this.setDraggable(ddGroup);
+};
+
+Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
+    onInitDrag : function(x, y){
+        var el = Ext.get(this.dragData.ddel.cloneNode(true));
+        this.proxy.update(el.dom);
+        el.setWidth(el.child('em').getWidth());
+        this.onStartDrag(x, y);
+        return true;
+    },
+
+    // private
+    collectSelection: function(data) {
+        data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
+        var i = 0;
+        this.view.store.each(function(rec){
+            if (this.view.isSelected(i)) {
+                var n = this.view.getNode(i);
+                var dragNode = n.cloneNode(true);
+                dragNode.id = Ext.id();
+                data.ddel.appendChild(dragNode);
+                data.records.push(this.view.store.getAt(i));
+                data.viewNodes.push(n);
+            }
+            i++;
+        }, this);
+    },
+
+    // override
+    onEndDrag: function(data, e) {
+        var d = Ext.get(this.dragData.ddel);
+        if (d && d.hasClass("multi-proxy")) {
+            d.remove();
+        }
+    },
+
+    // override
+    getDragData: function(e){
+        var target = this.view.findItemFromChild(e.getTarget());
+        if(target) {
+            if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
+                this.view.select(target);
+                this.ms.setValue(this.ms.getValue());
+            }
+            if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
+            var dragData = {
+                sourceView: this.view,
+                viewNodes: [],
+                records: []
+            };
+            if (this.view.getSelectionCount() == 1) {
+                var i = this.view.getSelectedIndexes()[0];
+                var n = this.view.getNode(i);
+                dragData.viewNodes.push(dragData.ddel = n);
+                dragData.records.push(this.view.store.getAt(i));
+                dragData.repairXY = Ext.fly(n).getXY();
+            } else {
+                dragData.ddel = document.createElement('div');
+                dragData.ddel.className = 'multi-proxy';
+                this.collectSelection(dragData);
+            }
+            return dragData;
+        }
+        return false;
+    },
+
+    // override the default repairXY.
+    getRepairXY : function(e){
+        return this.dragData.repairXY;
+    },
+
+    // private
+    setDraggable: function(ddGroup){
+        if (!ddGroup) return;
+        if (Ext.isArray(ddGroup)) {
+            Ext.each(ddGroup, this.setDraggable, this);
+            return;
+        }
+        this.addToGroup(ddGroup);
+    }
+});
+
+Ext.ux.form.MultiSelect.DropZone = function(ms, config){
+    this.ms = ms;
+    this.view = ms.view;
+    var ddGroup = config.ddGroup || 'MultiselectDD';
+    var dd;
+    if (Ext.isArray(ddGroup)){
+        dd = ddGroup.shift();
+    } else {
+        dd = ddGroup;
+        ddGroup = null;
+    }
+    Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
+    this.setDroppable(ddGroup);
+};
+
+Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
+    /**
+     * Part of the Ext.dd.DropZone interface. If no target node is found, the
+     * whole Element becomes the target, and this causes the drop gesture to append.
+     */
+    getTargetFromEvent : function(e) {
+        var target = e.getTarget();
+        return target;
+    },
+
+    // private
+    getDropPoint : function(e, n, dd){
+        if (n == this.ms.fs.body.dom) { return "below"; }
+        var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
+        var c = t + (b - t) / 2;
+        var y = Ext.lib.Event.getPageY(e);
+        if(y <= c) {
+            return "above";
+        }else{
+            return "below";
+        }
+    },
+
+    // private
+    isValidDropPoint: function(pt, n, data) {
+        if (!data.viewNodes || (data.viewNodes.length != 1)) {
+            return true;
+        }
+        var d = data.viewNodes[0];
+        if (d == n) {
+            return false;
+        }
+        if ((pt == "below") && (n.nextSibling == d)) {
+            return false;
+        }
+        if ((pt == "above") && (n.previousSibling == d)) {
+            return false;
+        }
+        return true;
+    },
+
+    // override
+    onNodeEnter : function(n, dd, e, data){
+        return false;
+    },
+
+    // override
+    onNodeOver : function(n, dd, e, data){
+        var dragElClass = this.dropNotAllowed;
+        var pt = this.getDropPoint(e, n, dd);
+        if (this.isValidDropPoint(pt, n, data)) {
+            if (this.ms.appendOnly) {
+                return "x-tree-drop-ok-below";
+            }
+
+            // set the insert point style on the target node
+            if (pt) {
+                var targetElClass;
+                if (pt == "above"){
+                    dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+                    targetElClass = "x-view-drag-insert-above";
+                } else {
+                    dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+                    targetElClass = "x-view-drag-insert-below";
+                }
+                if (this.lastInsertClass != targetElClass){
+                    Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+                    this.lastInsertClass = targetElClass;
+                }
+            }
+        }
+        return dragElClass;
+    },
+
+    // private
+    onNodeOut : function(n, dd, e, data){
+        this.removeDropIndicators(n);
+    },
+
+    // private
+    onNodeDrop : function(n, dd, e, data){
+        if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
+            return false;
+        }
+        var pt = this.getDropPoint(e, n, dd);
+        if (n != this.ms.fs.body.dom)
+            n = this.view.findItemFromChild(n);
+
+        if(this.ms.appendOnly) {
+            insertAt = this.view.store.getCount();
+        } else {
+            insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);
+            if (pt == "below") {
+                insertAt++;
+            }
+        }
+
+        var dir = false;
+
+        // Validate if dragging within the same MultiSelect
+        if (data.sourceView == this.view) {
+            // If the first element to be inserted below is the target node, remove it
+            if (pt == "below") {
+                if (data.viewNodes[0] == n) {
+                    data.viewNodes.shift();
+                }
+            } else {  // If the last element to be inserted above is the target node, remove it
+                if (data.viewNodes[data.viewNodes.length - 1] == n) {
+                    data.viewNodes.pop();
+                }
+            }
+
+            // Nothing to drop...
+            if (!data.viewNodes.length) {
+                return false;
+            }
+
+            // If we are moving DOWN, then because a store.remove() takes place first,
+            // the insertAt must be decremented.
+            if (insertAt > this.view.store.indexOf(data.records[0])) {
+                dir = 'down';
+                insertAt--;
+            }
+        }
+
+        for (var i = 0; i < data.records.length; i++) {
+            var r = data.records[i];
+            if (data.sourceView) {
+                data.sourceView.store.remove(r);
+            }
+            this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
+            var si = this.view.store.sortInfo;
+            if(si){
+                this.view.store.sort(si.field, si.direction);
+            }
+        }
+        return true;
+    },
+
+    // private
+    removeDropIndicators : function(n){
+        if(n){
+            Ext.fly(n).removeClass([
+                "x-view-drag-insert-above",
+                "x-view-drag-insert-left",
+                "x-view-drag-insert-right",
+                "x-view-drag-insert-below"]);
+            this.lastInsertClass = "_noclass";
+        }
+    },
+
+    // private
+    setDroppable: function(ddGroup){
+        if (!ddGroup) return;
+        if (Ext.isArray(ddGroup)) {
+            Ext.each(ddGroup, this.setDroppable, this);
+            return;
+        }
+        this.addToGroup(ddGroup);
+    }
+});