3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
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.
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.
19 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
22 * Create a new ItemSelector
23 * @param {Object} config Configuration options
26 Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
32 iconRight:"right2.gif",
34 iconBottom:"bottom2.gif",
44 defaultAutoCreate:{tag: "div"},
46 * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
50 initComponent: function(){
51 Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
58 onRender: function(ct, position){
59 Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
61 // Internal default configuration for both multiselects
76 this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
77 this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
79 this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
80 this.toMultiselect.on('dblclick', this.onRowDblClick, this);
82 var p = new Ext.Panel({
83 bodyStyle:this.bodyStyle,
86 layoutConfig:{columns:3}
89 p.add(this.fromMultiselect);
90 var icons = new Ext.Panel({header:false});
92 p.add(this.toMultiselect);
94 icons.el.down('.'+icons.bwrapCls).remove();
97 if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
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'; }
130 var tb = p.body.first();
131 this.el.setWidth(p.body.first().getWidth());
132 p.body.removeClass();
134 this.hiddenName = this.name;
135 var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
136 this.hiddenField = this.el.createChild(hiddenTag);
139 doLayout: function(){
141 this.fromMultiselect.fs.doLayout();
142 this.toMultiselect.fs.doLayout();
146 afterRender: function(){
147 Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
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);
157 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
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);
165 selectionsArray = [];
166 for (var i=records.length-1; i>-1; i--) {
168 this.toMultiselect.view.store.remove(record);
169 this.toMultiselect.view.store.insert(0, record);
170 selectionsArray.push(((records.length - 1) - i));
173 this.toMultiselect.view.refresh();
174 this.toMultiselect.view.select(selectionsArray);
177 toBottom : function() {
178 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
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);
186 selectionsArray = [];
187 for (var i=0; i<records.length; 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));
194 this.toMultiselect.view.refresh();
195 this.toMultiselect.view.select(selectionsArray);
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);
212 this.toMultiselect.view.refresh();
213 this.toMultiselect.view.select(newSelectionsArray);
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);
232 this.toMultiselect.view.refresh();
233 this.toMultiselect.view.select(newSelectionsArray);
237 fromTo : function() {
238 var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
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);
245 if(!this.allowDup)selectionsArray = [];
246 for (var i=0; i<records.length; i++) {
249 var x=new Ext.data.Record();
252 this.toMultiselect.view.store.add(record);
254 this.fromMultiselect.view.store.remove(record);
255 this.toMultiselect.view.store.add(record);
256 selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
260 this.toMultiselect.view.refresh();
261 this.fromMultiselect.view.refresh();
262 var si = this.toMultiselect.store.sortInfo;
264 this.toMultiselect.store.sort(si.field, si.direction);
266 this.toMultiselect.view.select(selectionsArray);
269 toFrom : function() {
270 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
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);
277 selectionsArray = [];
278 for (var i=0; i<records.length; i++) {
280 this.toMultiselect.view.store.remove(record);
282 this.fromMultiselect.view.store.add(record);
283 selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
287 this.fromMultiselect.view.refresh();
288 this.toMultiselect.view.refresh();
289 var si = this.fromMultiselect.store.sortInfo;
291 this.fromMultiselect.store.sort(si.field, si.direction);
293 this.fromMultiselect.view.select(selectionsArray);
296 valueChanged: function(store) {
299 for (var i=0; i<store.getCount(); i++) {
300 record = store.getAt(i);
301 values.push(record.get(this.toMultiselect.valueField));
303 this.hiddenField.dom.value = values.join(this.delimiter);
304 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
307 getValue : function() {
308 return this.hiddenField.dom.value;
311 onRowDblClick : function(vw, index, node, e) {
312 if (vw == this.toMultiselect.view){
314 } else if (vw == this.fromMultiselect.view) {
317 return this.fireEvent('rowdblclick', vw, index, node, e);
321 range = this.toMultiselect.store.getRange();
322 this.toMultiselect.store.removeAll();
323 this.fromMultiselect.store.add(range);
324 var si = this.fromMultiselect.store.sortInfo;
326 this.fromMultiselect.store.sort(si.field, si.direction);
328 this.valueChanged(this.toMultiselect.store);
332 Ext.reg('itemselector', Ext.ux.form.ItemSelector);
335 Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;