examples/docs/source/MultiSelect.html

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