/source/Plug-in/ext/ItemSelector.js

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