examples/ux/MultiSelect.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ns('Ext.ux.form');\r
   8 \r
   9 /**\r
  10  * @class Ext.ux.form.MultiSelect\r
  11  * @extends Ext.form.Field\r
  12  * A control that allows selection and form submission of multiple list items.\r
  13  *\r
  14  *  @history\r
  15  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
  16  *    2008-06-19 bpm Docs and demo code clean up\r
  17  *\r
  18  * @constructor\r
  19  * Create a new MultiSelect\r
  20  * @param {Object} config Configuration options\r
  21  * @xtype multiselect \r
  22  */\r
  23 Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {\r
  24     /**\r
  25      * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
  26      */\r
  27     /**\r
  28      * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.\r
  29      */\r
  30     /**\r
  31      * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).\r
  32      */\r
  33     /**\r
  34      * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).\r
  35      */\r
  36     /**\r
  37      * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).\r
  38      */\r
  39     ddReorder:false,\r
  40     /**\r
  41      * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a\r
  42      * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
  43      */\r
  44     /**\r
  45      * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled\r
  46      * (use for lists which are sorted, defaults to false).\r
  47      */\r
  48     appendOnly:false,\r
  49     /**\r
  50      * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
  51      */\r
  52     width:100,\r
  53     /**\r
  54      * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
  55      */\r
  56     height:100,\r
  57     /**\r
  58      * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
  59      */\r
  60     displayField:0,\r
  61     /**\r
  62      * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
  63      */\r
  64     valueField:1,\r
  65     /**\r
  66      * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no\r
  67      * selection (defaults to true).\r
  68      */\r
  69     allowBlank:true,\r
  70     /**\r
  71      * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).\r
  72      */\r
  73     minSelections:0,\r
  74     /**\r
  75      * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).\r
  76      */\r
  77     maxSelections:Number.MAX_VALUE,\r
  78     /**\r
  79      * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
  80      * {@link Ext.form.TextField#blankText}.\r
  81      */\r
  82     blankText:Ext.form.TextField.prototype.blankText,\r
  83     /**\r
  84      * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}\r
  85      * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.\r
  86      */\r
  87     minSelectionsText:'Minimum {0} item(s) required',\r
  88     /**\r
  89      * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}\r
  90      * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.\r
  91      */\r
  92     maxSelectionsText:'Maximum {0} item(s) allowed',\r
  93     /**\r
  94      * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
  95      * (defaults to ',').\r
  96      */\r
  97     delimiter:',',\r
  98     /**\r
  99      * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).\r
 100      * Acceptable values for this property are:\r
 101      * <div class="mdetail-params"><ul>\r
 102      * <li><b>any {@link Ext.data.Store Store} subclass</b></li>\r
 103      * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.\r
 104      * <div class="mdetail-params"><ul>\r
 105      * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">\r
 106      * A 1-dimensional array will automatically be expanded (each array item will be the combo\r
 107      * {@link #valueField value} and {@link #displayField text})</div></li>\r
 108      * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">\r
 109      * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\r
 110      * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.\r
 111      * </div></li></ul></div></li></ul></div>\r
 112      */\r
 113 \r
 114     // private\r
 115     defaultAutoCreate : {tag: "div"},\r
 116 \r
 117     // private\r
 118     initComponent: function(){\r
 119         Ext.ux.form.MultiSelect.superclass.initComponent.call(this);\r
 120 \r
 121         if(Ext.isArray(this.store)){\r
 122             if (Ext.isArray(this.store[0])){\r
 123                 this.store = new Ext.data.ArrayStore({\r
 124                     fields: ['value','text'],\r
 125                     data: this.store\r
 126                 });\r
 127                 this.valueField = 'value';\r
 128             }else{\r
 129                 this.store = new Ext.data.ArrayStore({\r
 130                     fields: ['text'],\r
 131                     data: this.store,\r
 132                     expandData: true\r
 133                 });\r
 134                 this.valueField = 'text';\r
 135             }\r
 136             this.displayField = 'text';\r
 137         } else {\r
 138             this.store = Ext.StoreMgr.lookup(this.store);\r
 139         }\r
 140 \r
 141         this.addEvents({\r
 142             'dblclick' : true,\r
 143             'click' : true,\r
 144             'change' : true,\r
 145             'drop' : true\r
 146         });\r
 147     },\r
 148 \r
 149     // private\r
 150     onRender: function(ct, position){\r
 151         Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);\r
 152 \r
 153         var fs = this.fs = new Ext.form.FieldSet({\r
 154             renderTo: this.el,\r
 155             title: this.legend,\r
 156             height: this.height,\r
 157             width: this.width,\r
 158             style: "padding:0;",\r
 159             tbar: this.tbar\r
 160         });\r
 161         fs.body.addClass('ux-mselect');\r
 162 \r
 163         this.view = new Ext.ListView({\r
 164             multiSelect: true,\r
 165             store: this.store,\r
 166             columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],\r
 167             hideHeaders: true\r
 168         });\r
 169 \r
 170         fs.add(this.view);\r
 171 \r
 172         this.view.on('click', this.onViewClick, this);\r
 173         this.view.on('beforeclick', this.onViewBeforeClick, this);\r
 174         this.view.on('dblclick', this.onViewDblClick, this);\r
 175 \r
 176         this.hiddenName = this.name || Ext.id();\r
 177         var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };\r
 178         this.hiddenField = this.el.createChild(hiddenTag);\r
 179         this.hiddenField.dom.disabled = this.hiddenName != this.name;\r
 180         fs.doLayout();\r
 181     },\r
 182 \r
 183     // private\r
 184     afterRender: function(){\r
 185         Ext.ux.form.MultiSelect.superclass.afterRender.call(this);\r
 186 \r
 187         if (this.ddReorder && !this.dragGroup && !this.dropGroup){\r
 188             this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();\r
 189         }\r
 190 \r
 191         if (this.draggable || this.dragGroup){\r
 192             this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {\r
 193                 ddGroup: this.dragGroup\r
 194             });\r
 195         }\r
 196         if (this.droppable || this.dropGroup){\r
 197             this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {\r
 198                 ddGroup: this.dropGroup\r
 199             });\r
 200         }\r
 201     },\r
 202 \r
 203     // private\r
 204     onViewClick: function(vw, index, node, e) {\r
 205         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
 206         this.hiddenField.dom.value = this.getValue();\r
 207         this.fireEvent('click', this, e);\r
 208         this.validate();\r
 209     },\r
 210 \r
 211     // private\r
 212     onViewBeforeClick: function(vw, index, node, e) {\r
 213         if (this.disabled) {return false;}\r
 214     },\r
 215 \r
 216     // private\r
 217     onViewDblClick : function(vw, index, node, e) {\r
 218         return this.fireEvent('dblclick', vw, index, node, e);\r
 219     },\r
 220 \r
 221     /**\r
 222      * Returns an array of data values for the selected items in the list. The values will be separated\r
 223      * by {@link #delimiter}.\r
 224      * @return {Array} value An array of string data values\r
 225      */\r
 226     getValue: function(valueField){\r
 227         var returnArray = [];\r
 228         var selectionsArray = this.view.getSelectedIndexes();\r
 229         if (selectionsArray.length == 0) {return '';}\r
 230         for (var i=0; i<selectionsArray.length; i++) {\r
 231             returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));\r
 232         }\r
 233         return returnArray.join(this.delimiter);\r
 234     },\r
 235 \r
 236     /**\r
 237      * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
 238      * @param {String/Array} values The values to set\r
 239      */\r
 240     setValue: function(values) {\r
 241         var index;\r
 242         var selections = [];\r
 243         this.view.clearSelections();\r
 244         this.hiddenField.dom.value = '';\r
 245 \r
 246         if (!values || (values == '')) { return; }\r
 247 \r
 248         if (!Ext.isArray(values)) { values = values.split(this.delimiter); }\r
 249         for (var i=0; i<values.length; i++) {\r
 250             index = this.view.store.indexOf(this.view.store.query(this.valueField,\r
 251                 new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
 252             selections.push(index);\r
 253         }\r
 254         this.view.select(selections);\r
 255         this.hiddenField.dom.value = this.getValue();\r
 256         this.validate();\r
 257     },\r
 258 \r
 259     // inherit docs\r
 260     reset : function() {\r
 261         this.setValue('');\r
 262     },\r
 263 \r
 264     // inherit docs\r
 265     getRawValue: function(valueField) {\r
 266         var tmp = this.getValue(valueField);\r
 267         if (tmp.length) {\r
 268             tmp = tmp.split(this.delimiter);\r
 269         }\r
 270         else {\r
 271             tmp = [];\r
 272         }\r
 273         return tmp;\r
 274     },\r
 275 \r
 276     // inherit docs\r
 277     setRawValue: function(values){\r
 278         setValue(values);\r
 279     },\r
 280 \r
 281     // inherit docs\r
 282     validateValue : function(value){\r
 283         if (value.length < 1) { // if it has no value\r
 284              if (this.allowBlank) {\r
 285                  this.clearInvalid();\r
 286                  return true;\r
 287              } else {\r
 288                  this.markInvalid(this.blankText);\r
 289                  return false;\r
 290              }\r
 291         }\r
 292         if (value.length < this.minSelections) {\r
 293             this.markInvalid(String.format(this.minSelectionsText, this.minSelections));\r
 294             return false;\r
 295         }\r
 296         if (value.length > this.maxSelections) {\r
 297             this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));\r
 298             return false;\r
 299         }\r
 300         return true;\r
 301     },\r
 302 \r
 303     // inherit docs\r
 304     disable: function(){\r
 305         this.disabled = true;\r
 306         this.hiddenField.dom.disabled = true;\r
 307         this.fs.disable();\r
 308     },\r
 309 \r
 310     // inherit docs\r
 311     enable: function(){\r
 312         this.disabled = false;\r
 313         this.hiddenField.dom.disabled = false;\r
 314         this.fs.enable();\r
 315     },\r
 316 \r
 317     // inherit docs\r
 318     destroy: function(){\r
 319         Ext.destroy(this.fs, this.dragZone, this.dropZone);\r
 320         Ext.ux.form.MultiSelect.superclass.destroy.call(this);\r
 321     }\r
 322 });\r
 323 \r
 324 \r
 325 Ext.reg('multiselect', Ext.ux.form.MultiSelect);\r
 326 \r
 327 //backwards compat\r
 328 Ext.ux.Multiselect = Ext.ux.form.MultiSelect;\r
 329 \r
 330 \r
 331 Ext.ux.form.MultiSelect.DragZone = function(ms, config){\r
 332     this.ms = ms;\r
 333     this.view = ms.view;\r
 334     var ddGroup = config.ddGroup || 'MultiselectDD';\r
 335     var dd;\r
 336     if (Ext.isArray(ddGroup)){\r
 337         dd = ddGroup.shift();\r
 338     } else {\r
 339         dd = ddGroup;\r
 340         ddGroup = null;\r
 341     }\r
 342     Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
 343     this.setDraggable(ddGroup);\r
 344 };\r
 345 \r
 346 Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {\r
 347     onInitDrag : function(x, y){\r
 348         var el = Ext.get(this.dragData.ddel.cloneNode(true));\r
 349         this.proxy.update(el.dom);\r
 350         el.setWidth(el.child('em').getWidth());\r
 351         this.onStartDrag(x, y);\r
 352         return true;\r
 353     },\r
 354     \r
 355     // private\r
 356     collectSelection: function(data) {\r
 357         data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();\r
 358         var i = 0;\r
 359         this.view.store.each(function(rec){\r
 360             if (this.view.isSelected(i)) {\r
 361                 var n = this.view.getNode(i);\r
 362                 var dragNode = n.cloneNode(true);\r
 363                 dragNode.id = Ext.id();\r
 364                 data.ddel.appendChild(dragNode);\r
 365                 data.records.push(this.view.store.getAt(i));\r
 366                 data.viewNodes.push(n);\r
 367             }\r
 368             i++;\r
 369         }, this);\r
 370     },\r
 371 \r
 372     // override\r
 373     onEndDrag: function(data, e) {\r
 374         var d = Ext.get(this.dragData.ddel);\r
 375         if (d && d.hasClass("multi-proxy")) {\r
 376             d.remove();\r
 377         }\r
 378     },\r
 379 \r
 380     // override\r
 381     getDragData: function(e){\r
 382         var target = this.view.findItemFromChild(e.getTarget());\r
 383         if(target) {\r
 384             if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {\r
 385                 this.view.select(target);\r
 386                 this.ms.setValue(this.ms.getValue());\r
 387             }\r
 388             if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;\r
 389             var dragData = {\r
 390                 sourceView: this.view,\r
 391                 viewNodes: [],\r
 392                 records: []\r
 393             };\r
 394             if (this.view.getSelectionCount() == 1) {\r
 395                 var i = this.view.getSelectedIndexes()[0];\r
 396                 var n = this.view.getNode(i);\r
 397                 dragData.viewNodes.push(dragData.ddel = n);\r
 398                 dragData.records.push(this.view.store.getAt(i));\r
 399                 dragData.repairXY = Ext.fly(n).getXY();\r
 400             } else {\r
 401                 dragData.ddel = document.createElement('div');\r
 402                 dragData.ddel.className = 'multi-proxy';\r
 403                 this.collectSelection(dragData);\r
 404             }\r
 405             return dragData;\r
 406         }\r
 407         return false;\r
 408     },\r
 409 \r
 410     // override the default repairXY.\r
 411     getRepairXY : function(e){\r
 412         return this.dragData.repairXY;\r
 413     },\r
 414 \r
 415     // private\r
 416     setDraggable: function(ddGroup){\r
 417         if (!ddGroup) return;\r
 418         if (Ext.isArray(ddGroup)) {\r
 419             Ext.each(ddGroup, this.setDraggable, this);\r
 420             return;\r
 421         }\r
 422         this.addToGroup(ddGroup);\r
 423     }\r
 424 });\r
 425 \r
 426 Ext.ux.form.MultiSelect.DropZone = function(ms, config){\r
 427     this.ms = ms;\r
 428     this.view = ms.view;\r
 429     var ddGroup = config.ddGroup || 'MultiselectDD';\r
 430     var dd;\r
 431     if (Ext.isArray(ddGroup)){\r
 432         dd = ddGroup.shift();\r
 433     } else {\r
 434         dd = ddGroup;\r
 435         ddGroup = null;\r
 436     }\r
 437     Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
 438     this.setDroppable(ddGroup);\r
 439 };\r
 440 \r
 441 Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {\r
 442     /**\r
 443          * Part of the Ext.dd.DropZone interface. If no target node is found, the\r
 444          * whole Element becomes the target, and this causes the drop gesture to append.\r
 445          */\r
 446     getTargetFromEvent : function(e) {\r
 447         var target = e.getTarget();\r
 448         return target;\r
 449     },\r
 450 \r
 451     // private\r
 452     getDropPoint : function(e, n, dd){\r
 453         if (n == this.ms.fs.body.dom) { return "below"; }\r
 454         var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;\r
 455         var c = t + (b - t) / 2;\r
 456         var y = Ext.lib.Event.getPageY(e);\r
 457         if(y <= c) {\r
 458             return "above";\r
 459         }else{\r
 460             return "below";\r
 461         }\r
 462     },\r
 463 \r
 464     // private\r
 465     isValidDropPoint: function(pt, n, data) {\r
 466         if (!data.viewNodes || (data.viewNodes.length != 1)) {\r
 467             return true;\r
 468         }\r
 469         var d = data.viewNodes[0];\r
 470         if (d == n) {\r
 471             return false;\r
 472         }\r
 473         if ((pt == "below") && (n.nextSibling == d)) {\r
 474             return false;\r
 475         }\r
 476         if ((pt == "above") && (n.previousSibling == d)) {\r
 477             return false;\r
 478         }\r
 479         return true;\r
 480     },\r
 481 \r
 482     // override\r
 483     onNodeEnter : function(n, dd, e, data){\r
 484         return false;\r
 485     },\r
 486 \r
 487     // override\r
 488     onNodeOver : function(n, dd, e, data){\r
 489         var dragElClass = this.dropNotAllowed;\r
 490         var pt = this.getDropPoint(e, n, dd);\r
 491         if (this.isValidDropPoint(pt, n, data)) {\r
 492             if (this.ms.appendOnly) {\r
 493                 return "x-tree-drop-ok-below";\r
 494             }\r
 495 \r
 496             // set the insert point style on the target node\r
 497             if (pt) {\r
 498                 var targetElClass;\r
 499                 if (pt == "above"){\r
 500                     dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";\r
 501                     targetElClass = "x-view-drag-insert-above";\r
 502                 } else {\r
 503                     dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";\r
 504                     targetElClass = "x-view-drag-insert-below";\r
 505                 }\r
 506                 if (this.lastInsertClass != targetElClass){\r
 507                     Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);\r
 508                     this.lastInsertClass = targetElClass;\r
 509                 }\r
 510             }\r
 511         }\r
 512         return dragElClass;\r
 513     },\r
 514 \r
 515     // private\r
 516     onNodeOut : function(n, dd, e, data){\r
 517         this.removeDropIndicators(n);\r
 518     },\r
 519 \r
 520     // private\r
 521     onNodeDrop : function(n, dd, e, data){\r
 522         if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {\r
 523             return false;\r
 524         }\r
 525         var pt = this.getDropPoint(e, n, dd);\r
 526         if (n != this.ms.fs.body.dom)\r
 527             n = this.view.findItemFromChild(n);\r
 528         var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);\r
 529         if (pt == "below") {\r
 530             insertAt++;\r
 531         }\r
 532 \r
 533         var dir = false;\r
 534 \r
 535         // Validate if dragging within the same MultiSelect\r
 536         if (data.sourceView == this.view) {\r
 537             // If the first element to be inserted below is the target node, remove it\r
 538             if (pt == "below") {\r
 539                 if (data.viewNodes[0] == n) {\r
 540                     data.viewNodes.shift();\r
 541                 }\r
 542             } else {  // If the last element to be inserted above is the target node, remove it\r
 543                 if (data.viewNodes[data.viewNodes.length - 1] == n) {\r
 544                     data.viewNodes.pop();\r
 545                 }\r
 546             }\r
 547 \r
 548             // Nothing to drop...\r
 549             if (!data.viewNodes.length) {\r
 550                 return false;\r
 551             }\r
 552 \r
 553             // If we are moving DOWN, then because a store.remove() takes place first,\r
 554             // the insertAt must be decremented.\r
 555             if (insertAt > this.view.store.indexOf(data.records[0])) {\r
 556                 dir = 'down';\r
 557                 insertAt--;\r
 558             }\r
 559         }\r
 560 \r
 561         for (var i = 0; i < data.records.length; i++) {\r
 562             var r = data.records[i];\r
 563             if (data.sourceView) {\r
 564                 data.sourceView.store.remove(r);\r
 565             }\r
 566             this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);\r
 567             var si = this.view.store.sortInfo;\r
 568             if(si){\r
 569                 this.view.store.sort(si.field, si.direction);\r
 570             }\r
 571         }\r
 572         return true;\r
 573     },\r
 574 \r
 575     // private\r
 576     removeDropIndicators : function(n){\r
 577         if(n){\r
 578             Ext.fly(n).removeClass([\r
 579                 "x-view-drag-insert-above",\r
 580                 "x-view-drag-insert-left",\r
 581                 "x-view-drag-insert-right",\r
 582                 "x-view-drag-insert-below"]);\r
 583             this.lastInsertClass = "_noclass";\r
 584         }\r
 585     },\r
 586 \r
 587     // private\r
 588     setDroppable: function(ddGroup){\r
 589         if (!ddGroup) return;\r
 590         if (Ext.isArray(ddGroup)) {\r
 591             Ext.each(ddGroup, this.setDroppable, this);\r
 592             return;\r
 593         }\r
 594         this.addToGroup(ddGroup);\r
 595     }\r
 596 });\r