source: trunk/web/addons/job_monarch/lib/extjs-30/examples/ux/ItemSelector.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

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