docs/source/ItemSelector.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">/*\r
   9  * Note that this control will most likely remain as an example, and not as a core Ext form\r
  10  * control.  However, the API will be changing in a future release and so should not yet be\r
  11  * treated as a final, stable API at this time.\r
  12  */\r
  13 \r
  14 <div id="cls-Ext.ux.form.ItemSelector"></div>/**\r
  15  * @class Ext.ux.form.ItemSelector\r
  16  * @extends Ext.form.Field\r
  17  * A control that allows selection of between two Ext.ux.form.MultiSelect controls.\r
  18  *\r
  19  *  @history\r
  20  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
  21  *\r
  22  * @constructor\r
  23  * Create a new ItemSelector\r
  24  * @param {Object} config Configuration options\r
  25  * @xtype itemselector \r
  26  */\r
  27 Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {\r
  28     hideNavIcons:false,\r
  29     imagePath:"",\r
  30     iconUp:"up2.gif",\r
  31     iconDown:"down2.gif",\r
  32     iconLeft:"left2.gif",\r
  33     iconRight:"right2.gif",\r
  34     iconTop:"top2.gif",\r
  35     iconBottom:"bottom2.gif",\r
  36     drawUpIcon:true,\r
  37     drawDownIcon:true,\r
  38     drawLeftIcon:true,\r
  39     drawRightIcon:true,\r
  40     drawTopIcon:true,\r
  41     drawBotIcon:true,\r
  42     delimiter:',',\r
  43     bodyStyle:null,\r
  44     border:false,\r
  45     defaultAutoCreate:{tag: "div"},\r
  46     <div id="cfg-Ext.ux.form.ItemSelector-multiselects"></div>/**\r
  47      * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)\r
  48      */\r
  49     multiselects:null,\r
  50 \r
  51     initComponent: function(){\r
  52         Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
  53         this.addEvents({\r
  54             'rowdblclick' : true,\r
  55             'change' : true\r
  56         });\r
  57     },\r
  58 \r
  59     onRender: function(ct, position){\r
  60         Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);\r
  61 \r
  62         // Internal default configuration for both multiselects\r
  63         var msConfig = [{\r
  64             legend: 'Available',\r
  65             draggable: true,\r
  66             droppable: true,\r
  67             width: 100,\r
  68             height: 100\r
  69         },{\r
  70             legend: 'Selected',\r
  71             droppable: true,\r
  72             draggable: true,\r
  73             width: 100,\r
  74             height: 100\r
  75         }];\r
  76 \r
  77         this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));\r
  78         this.fromMultiselect.on('dblclick', this.onRowDblClick, this);\r
  79 \r
  80         this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));\r
  81         this.toMultiselect.on('dblclick', this.onRowDblClick, this);\r
  82 \r
  83         var p = new Ext.Panel({\r
  84             bodyStyle:this.bodyStyle,\r
  85             border:this.border,\r
  86             layout:"table",\r
  87             layoutConfig:{columns:3}\r
  88         });\r
  89 \r
  90         p.add(this.fromMultiselect);\r
  91         var icons = new Ext.Panel({header:false});\r
  92         p.add(icons);\r
  93         p.add(this.toMultiselect);\r
  94         p.render(this.el);\r
  95         icons.el.down('.'+icons.bwrapCls).remove();\r
  96 \r
  97         // ICON HELL!!!\r
  98         if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")\r
  99             this.imagePath+="/";\r
 100         this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');\r
 101         this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');\r
 102         this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');\r
 103         this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');\r
 104         this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');\r
 105         this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');\r
 106         var el=icons.getEl();\r
 107         this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});\r
 108         el.createChild({tag: 'br'});\r
 109         this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});\r
 110         el.createChild({tag: 'br'});\r
 111         this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});\r
 112         el.createChild({tag: 'br'});\r
 113         this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});\r
 114         el.createChild({tag: 'br'});\r
 115         this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});\r
 116         el.createChild({tag: 'br'});\r
 117         this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});\r
 118         this.toTopIcon.on('click', this.toTop, this);\r
 119         this.upIcon.on('click', this.up, this);\r
 120         this.downIcon.on('click', this.down, this);\r
 121         this.toBottomIcon.on('click', this.toBottom, this);\r
 122         this.addIcon.on('click', this.fromTo, this);\r
 123         this.removeIcon.on('click', this.toFrom, this);\r
 124         if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }\r
 125         if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }\r
 126         if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }\r
 127         if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }\r
 128         if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }\r
 129         if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }\r
 130 \r
 131         var tb = p.body.first();\r
 132         this.el.setWidth(p.body.first().getWidth());\r
 133         p.body.removeClass();\r
 134 \r
 135         this.hiddenName = this.name;\r
 136         var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};\r
 137         this.hiddenField = this.el.createChild(hiddenTag);\r
 138     },\r
 139     \r
 140     doLayout: function(){\r
 141         if(this.rendered){\r
 142             this.fromMultiselect.fs.doLayout();\r
 143             this.toMultiselect.fs.doLayout();\r
 144         }\r
 145     },\r
 146 \r
 147     afterRender: function(){\r
 148         Ext.ux.form.ItemSelector.superclass.afterRender.call(this);\r
 149 \r
 150         this.toStore = this.toMultiselect.store;\r
 151         this.toStore.on('add', this.valueChanged, this);\r
 152         this.toStore.on('remove', this.valueChanged, this);\r
 153         this.toStore.on('load', this.valueChanged, this);\r
 154         this.valueChanged(this.toStore);\r
 155     },\r
 156 \r
 157     toTop : function() {\r
 158         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
 159         var records = [];\r
 160         if (selectionsArray.length > 0) {\r
 161             selectionsArray.sort();\r
 162             for (var i=0; i<selectionsArray.length; i++) {\r
 163                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
 164                 records.push(record);\r
 165             }\r
 166             selectionsArray = [];\r
 167             for (var i=records.length-1; i>-1; i--) {\r
 168                 record = records[i];\r
 169                 this.toMultiselect.view.store.remove(record);\r
 170                 this.toMultiselect.view.store.insert(0, record);\r
 171                 selectionsArray.push(((records.length - 1) - i));\r
 172             }\r
 173         }\r
 174         this.toMultiselect.view.refresh();\r
 175         this.toMultiselect.view.select(selectionsArray);\r
 176     },\r
 177 \r
 178     toBottom : function() {\r
 179         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
 180         var records = [];\r
 181         if (selectionsArray.length > 0) {\r
 182             selectionsArray.sort();\r
 183             for (var i=0; i<selectionsArray.length; i++) {\r
 184                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
 185                 records.push(record);\r
 186             }\r
 187             selectionsArray = [];\r
 188             for (var i=0; i<records.length; i++) {\r
 189                 record = records[i];\r
 190                 this.toMultiselect.view.store.remove(record);\r
 191                 this.toMultiselect.view.store.add(record);\r
 192                 selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));\r
 193             }\r
 194         }\r
 195         this.toMultiselect.view.refresh();\r
 196         this.toMultiselect.view.select(selectionsArray);\r
 197     },\r
 198 \r
 199     up : function() {\r
 200         var record = null;\r
 201         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
 202         selectionsArray.sort();\r
 203         var newSelectionsArray = [];\r
 204         if (selectionsArray.length > 0) {\r
 205             for (var i=0; i<selectionsArray.length; i++) {\r
 206                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
 207                 if ((selectionsArray[i] - 1) >= 0) {\r
 208                     this.toMultiselect.view.store.remove(record);\r
 209                     this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);\r
 210                     newSelectionsArray.push(selectionsArray[i] - 1);\r
 211                 }\r
 212             }\r
 213             this.toMultiselect.view.refresh();\r
 214             this.toMultiselect.view.select(newSelectionsArray);\r
 215         }\r
 216     },\r
 217 \r
 218     down : function() {\r
 219         var record = null;\r
 220         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
 221         selectionsArray.sort();\r
 222         selectionsArray.reverse();\r
 223         var newSelectionsArray = [];\r
 224         if (selectionsArray.length > 0) {\r
 225             for (var i=0; i<selectionsArray.length; i++) {\r
 226                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
 227                 if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {\r
 228                     this.toMultiselect.view.store.remove(record);\r
 229                     this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);\r
 230                     newSelectionsArray.push(selectionsArray[i] + 1);\r
 231                 }\r
 232             }\r
 233             this.toMultiselect.view.refresh();\r
 234             this.toMultiselect.view.select(newSelectionsArray);\r
 235         }\r
 236     },\r
 237 \r
 238     fromTo : function() {\r
 239         var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();\r
 240         var records = [];\r
 241         if (selectionsArray.length > 0) {\r
 242             for (var i=0; i<selectionsArray.length; i++) {\r
 243                 record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);\r
 244                 records.push(record);\r
 245             }\r
 246             if(!this.allowDup)selectionsArray = [];\r
 247             for (var i=0; i<records.length; i++) {\r
 248                 record = records[i];\r
 249                 if(this.allowDup){\r
 250                     var x=new Ext.data.Record();\r
 251                     record.id=x.id;\r
 252                     delete x;\r
 253                     this.toMultiselect.view.store.add(record);\r
 254                 }else{\r
 255                     this.fromMultiselect.view.store.remove(record);\r
 256                     this.toMultiselect.view.store.add(record);\r
 257                     selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));\r
 258                 }\r
 259             }\r
 260         }\r
 261         this.toMultiselect.view.refresh();\r
 262         this.fromMultiselect.view.refresh();\r
 263         var si = this.toMultiselect.store.sortInfo;\r
 264         if(si){\r
 265             this.toMultiselect.store.sort(si.field, si.direction);\r
 266         }\r
 267         this.toMultiselect.view.select(selectionsArray);\r
 268     },\r
 269 \r
 270     toFrom : function() {\r
 271         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
 272         var records = [];\r
 273         if (selectionsArray.length > 0) {\r
 274             for (var i=0; i<selectionsArray.length; i++) {\r
 275                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
 276                 records.push(record);\r
 277             }\r
 278             selectionsArray = [];\r
 279             for (var i=0; i<records.length; i++) {\r
 280                 record = records[i];\r
 281                 this.toMultiselect.view.store.remove(record);\r
 282                 if(!this.allowDup){\r
 283                     this.fromMultiselect.view.store.add(record);\r
 284                     selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));\r
 285                 }\r
 286             }\r
 287         }\r
 288         this.fromMultiselect.view.refresh();\r
 289         this.toMultiselect.view.refresh();\r
 290         var si = this.fromMultiselect.store.sortInfo;\r
 291         if (si){\r
 292             this.fromMultiselect.store.sort(si.field, si.direction);\r
 293         }\r
 294         this.fromMultiselect.view.select(selectionsArray);\r
 295     },\r
 296 \r
 297     valueChanged: function(store) {\r
 298         var record = null;\r
 299         var values = [];\r
 300         for (var i=0; i<store.getCount(); i++) {\r
 301             record = store.getAt(i);\r
 302             values.push(record.get(this.toMultiselect.valueField));\r
 303         }\r
 304         this.hiddenField.dom.value = values.join(this.delimiter);\r
 305         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
 306     },\r
 307 \r
 308     getValue : function() {\r
 309         return this.hiddenField.dom.value;\r
 310     },\r
 311 \r
 312     onRowDblClick : function(vw, index, node, e) {\r
 313         if (vw == this.toMultiselect.view){\r
 314             this.toFrom();\r
 315         } else if (vw == this.fromMultiselect.view) {\r
 316             this.fromTo();\r
 317         }\r
 318         return this.fireEvent('rowdblclick', vw, index, node, e);\r
 319     },\r
 320 \r
 321     reset: function(){\r
 322         range = this.toMultiselect.store.getRange();\r
 323         this.toMultiselect.store.removeAll();\r
 324         this.fromMultiselect.store.add(range);\r
 325         var si = this.fromMultiselect.store.sortInfo;\r
 326         if (si){\r
 327             this.fromMultiselect.store.sort(si.field, si.direction);\r
 328         }\r
 329         this.valueChanged(this.toMultiselect.store);\r
 330     }\r
 331 });\r
 332 \r
 333 Ext.reg('itemselector', Ext.ux.form.ItemSelector);\r
 334 \r
 335 //backwards compat\r
 336 Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;\r
 337 </pre>    \r
 338 </body>\r
 339 </html>