examples/multiselect/MultiSelect.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /*\r
  10  * Note that this control should still be treated as an example and that the API will most likely\r
  11  * change once it is ported into the Ext core as a standard form control.  This is still planned\r
  12  * for a future release, so this should not yet be treated as a final, stable API at this time.\r
  13  */\r
  14  \r
  15 /** \r
  16  * @class Ext.ux.MultiSelect\r
  17  * @extends Ext.form.Field\r
  18  * A control that allows selection and form submission of multiple list items. The MultiSelect control\r
  19  * depends on the Ext.ux.DDView class to provide drag/drop capability both within the list and also \r
  20  * between multiple MultiSelect controls (see the Ext.ux.ItemSelector).\r
  21  * \r
  22  *  @history\r
  23  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
  24  *    2008-06-19 bpm Docs and demo code clean up\r
  25  * \r
  26  * @constructor\r
  27  * Create a new MultiSelect\r
  28  * @param {Object} config Configuration options\r
  29  */\r
  30 Ext.ux.Multiselect = Ext.extend(Ext.form.Field,  {\r
  31     /**\r
  32      * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
  33      */\r
  34     /**\r
  35      * @cfg {Store} store The {@link Ext.data.Store} used by the underlying Ext.ux.DDView.\r
  36      */\r
  37     /**\r
  38      * @cfg {Ext.ux.DDView} view The Ext.ux.DDView used to render the multiselect list.\r
  39      */\r
  40     /**\r
  41      * @cfg {String/Array} dragGroup The ddgroup name(s) for the DDView's DragZone (defaults to undefined). \r
  42      */ \r
  43     /**\r
  44      * @cfg {String/Array} dropGroup The ddgroup name(s) for the DDView's DropZone (defaults to undefined). \r
  45      */ \r
  46     /**\r
  47      * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a \r
  48      * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
  49      */\r
  50     /**\r
  51      * @cfg {String} fieldName The name of the field to sort by when sorting is enabled.\r
  52      */\r
  53     /**\r
  54      * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled \r
  55      * (use for lists which are sorted, defaults to false).\r
  56      */\r
  57     appendOnly:false,\r
  58     /**\r
  59      * @cfg {Array} dataFields Inline data definition when not using a pre-initialised store. Known to cause problems \r
  60      * in some browswers for very long lists. Use store for large datasets.\r
  61      */\r
  62     dataFields:[],\r
  63     /**\r
  64      * @cfg {Array} data Inline data when not using a pre-initialised store. Known to cause problems in some \r
  65      * browswers for very long lists. Use store for large datasets.\r
  66      */\r
  67     data:[],\r
  68     /**\r
  69      * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
  70      */\r
  71     width:100,\r
  72     /**\r
  73      * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
  74      */\r
  75     height:100,\r
  76     /**\r
  77      * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
  78      */\r
  79     displayField:0,\r
  80     /**\r
  81      * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
  82      */\r
  83     valueField:1,\r
  84     /**\r
  85      * @cfg {Boolean} allowBlank True to require at least one item in the list to be selected, false to allow no \r
  86      * selection (defaults to true).\r
  87      */\r
  88     allowBlank:true,\r
  89     /**\r
  90      * @cfg {Number} minLength Minimum number of selections allowed (defaults to 0).\r
  91      */\r
  92     minLength:0,\r
  93     /**\r
  94      * @cfg {Number} maxLength Maximum number of selections allowed (defaults to Number.MAX_VALUE). \r
  95      */\r
  96     maxLength:Number.MAX_VALUE,\r
  97     /**\r
  98      * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
  99      * {@link Ext.form.TextField#blankText}.\r
 100      */\r
 101     blankText:Ext.form.TextField.prototype.blankText,\r
 102     /**\r
 103      * @cfg {String} minLengthText Validation message displayed when {@link #minLength} is not met (defaults to 'Minimum {0} \r
 104      * item(s) required').  The {0} token will be replaced by the value of {@link #minLength}.\r
 105      */\r
 106     minLengthText:'Minimum {0} item(s) required',\r
 107     /**\r
 108      * @cfg {String} maxLengthText Validation message displayed when {@link #maxLength} is not met (defaults to 'Maximum {0} \r
 109      * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxLength}.\r
 110      */\r
 111     maxLengthText:'Maximum {0} item(s) allowed',\r
 112     /**\r
 113      * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
 114      * (defaults to ',').\r
 115      */\r
 116     delimiter:',',\r
 117     \r
 118     // DDView settings\r
 119     copy:false,\r
 120     allowDup:false,\r
 121     allowTrash:false,\r
 122     focusClass:undefined,\r
 123     sortDir:'ASC',\r
 124     \r
 125     // private\r
 126     defaultAutoCreate : {tag: "div"},\r
 127     \r
 128     // private\r
 129     initComponent: function(){\r
 130         Ext.ux.Multiselect.superclass.initComponent.call(this);\r
 131         this.addEvents({\r
 132             'dblclick' : true,\r
 133             'click' : true,\r
 134             'change' : true,\r
 135             'drop' : true\r
 136         });     \r
 137     },\r
 138     \r
 139     // private\r
 140     onRender: function(ct, position){\r
 141         Ext.ux.Multiselect.superclass.onRender.call(this, ct, position);\r
 142         \r
 143         var cls = 'ux-mselect';\r
 144         var fs = new Ext.form.FieldSet({\r
 145             renderTo:this.el,\r
 146             title:this.legend,\r
 147             height:this.height,\r
 148             width:this.width,\r
 149             style:"padding:0;",\r
 150             tbar:this.tbar\r
 151         });\r
 152         //if(!this.legend)fs.el.down('.'+fs.headerCls).remove();\r
 153         fs.body.addClass(cls);\r
 154 \r
 155         var tpl = '<tpl for="."><div class="' + cls + '-item';\r
 156         if(Ext.isIE || Ext.isIE7){\r
 157             tpl+='" unselectable=on';\r
 158         }else{\r
 159             tpl+=' x-unselectable"';\r
 160         }\r
 161         tpl+='>{' + this.displayField + '}</div></tpl>';\r
 162 \r
 163         if(!this.store){\r
 164             this.store = new Ext.data.SimpleStore({\r
 165                 fields: this.dataFields,\r
 166                 data : this.data\r
 167             });\r
 168         }\r
 169 \r
 170         this.view = new Ext.ux.DDView({\r
 171             multiSelect: true, \r
 172             store: this.store, \r
 173             selectedClass: cls+"-selected", \r
 174             tpl:tpl,\r
 175             allowDup:this.allowDup, \r
 176             copy: this.copy, \r
 177             allowTrash: this.allowTrash, \r
 178             dragGroup: this.dragGroup, \r
 179             dropGroup: this.dropGroup, \r
 180             itemSelector:"."+cls+"-item",\r
 181             isFormField:false, \r
 182             applyTo:fs.body,\r
 183             appendOnly:this.appendOnly,\r
 184             sortField:this.sortField, \r
 185             sortDir:this.sortDir\r
 186         });\r
 187 \r
 188         fs.add(this.view);\r
 189         \r
 190         this.view.on('click', this.onViewClick, this);\r
 191         this.view.on('beforeClick', this.onViewBeforeClick, this);\r
 192         this.view.on('dblclick', this.onViewDblClick, this);\r
 193         this.view.on('drop', function(ddView, n, dd, e, data){\r
 194             return this.fireEvent("drop", ddView, n, dd, e, data);\r
 195         }, this);\r
 196         \r
 197         this.hiddenName = this.name;\r
 198         var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};\r
 199         if (this.isFormField) { \r
 200             this.hiddenField = this.el.createChild(hiddenTag);\r
 201         } else {\r
 202             this.hiddenField = Ext.get(document.body).createChild(hiddenTag);\r
 203         }\r
 204         fs.doLayout();\r
 205     },\r
 206     \r
 207     // private\r
 208     initValue:Ext.emptyFn,\r
 209     \r
 210     // private\r
 211     onViewClick: function(vw, index, node, e) {\r
 212         var arrayIndex = this.preClickSelections.indexOf(index);\r
 213         if (arrayIndex  != -1)\r
 214         {\r
 215             this.preClickSelections.splice(arrayIndex, 1);\r
 216             this.view.clearSelections(true);\r
 217             this.view.select(this.preClickSelections);\r
 218         }\r
 219         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
 220         this.hiddenField.dom.value = this.getValue();\r
 221         this.fireEvent('click', this, e);\r
 222         this.validate();        \r
 223     },\r
 224 \r
 225     // private\r
 226     onViewBeforeClick: function(vw, index, node, e) {\r
 227         this.preClickSelections = this.view.getSelectedIndexes();\r
 228         if (this.disabled) {return false;}\r
 229     },\r
 230 \r
 231     // private\r
 232     onViewDblClick : function(vw, index, node, e) {\r
 233         return this.fireEvent('dblclick', vw, index, node, e);\r
 234     },  \r
 235     \r
 236     /**\r
 237      * Returns an array of data values for the selected items in the list. The values will be separated\r
 238      * by {@link #delimiter}.\r
 239      * @return {Array} value An array of string data values\r
 240      */\r
 241     getValue: function(valueField){\r
 242         var returnArray = [];\r
 243         var selectionsArray = this.view.getSelectedIndexes();\r
 244         if (selectionsArray.length == 0) {return '';}\r
 245         for (var i=0; i<selectionsArray.length; i++) {\r
 246             returnArray.push(this.store.getAt(selectionsArray[i]).get(((valueField != null)? valueField : this.valueField)));\r
 247         }\r
 248         return returnArray.join(this.delimiter);\r
 249     },\r
 250 \r
 251     /**\r
 252      * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
 253      * @param {String/Array} values The values to set\r
 254      */\r
 255     setValue: function(values) {\r
 256         var index;\r
 257         var selections = [];\r
 258         this.view.clearSelections();\r
 259         this.hiddenField.dom.value = '';\r
 260         \r
 261         if (!values || (values == '')) { return; }\r
 262         \r
 263         if (!(values instanceof Array)) { values = values.split(this.delimiter); }\r
 264         for (var i=0; i<values.length; i++) {\r
 265             index = this.view.store.indexOf(this.view.store.query(this.valueField, \r
 266                 new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
 267             selections.push(index);\r
 268         }\r
 269         this.view.select(selections);\r
 270         this.hiddenField.dom.value = this.getValue();\r
 271         this.validate();\r
 272     },\r
 273     \r
 274     // inherit docs\r
 275     reset : function() {\r
 276         this.setValue('');\r
 277     },\r
 278     \r
 279     // inherit docs\r
 280     getRawValue: function(valueField) {\r
 281         var tmp = this.getValue(valueField);\r
 282         if (tmp.length) {\r
 283             tmp = tmp.split(this.delimiter);\r
 284         }\r
 285         else{\r
 286             tmp = [];\r
 287         }\r
 288         return tmp;\r
 289     },\r
 290 \r
 291     // inherit docs\r
 292     setRawValue: function(values){\r
 293         setValue(values);\r
 294     },\r
 295 \r
 296     // inherit docs\r
 297     validateValue : function(value){\r
 298         if (value.length < 1) { // if it has no value\r
 299              if (this.allowBlank) {\r
 300                  this.clearInvalid();\r
 301                  return true;\r
 302              } else {\r
 303                  this.markInvalid(this.blankText);\r
 304                  return false;\r
 305              }\r
 306         }\r
 307         if (value.length < this.minLength) {\r
 308             this.markInvalid(String.format(this.minLengthText, this.minLength));\r
 309             return false;\r
 310         }\r
 311         if (value.length > this.maxLength) {\r
 312             this.markInvalid(String.format(this.maxLengthText, this.maxLength));\r
 313             return false;\r
 314         }\r
 315         return true;\r
 316     }\r
 317 });\r
 318 \r
 319 Ext.reg("multiselect", Ext.ux.Multiselect);\r