← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/examples/ux/ItemSelector.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/examples/ux/ItemSelector.js
 
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
 */
 
26
Ext.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
 
 
332
Ext.reg('itemselector', Ext.ux.form.ItemSelector);
 
333
 
 
334
//backwards compat
 
335
Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;