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