-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
- var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);\r
- if (pt == "below") {\r
- insertAt++;\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);
+ }
+});
git.ithinksw.org / extjs.git / blobdiff