3 * Copyright(c) 2006-2010 Ext JS, LLC
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
\r
9 * control. However, the API will be changing in a future release and so should not yet be
\r
10 * treated as a final, stable API at this time.
\r
14 * @class Ext.ux.form.ItemSelector
\r
15 * @extends Ext.form.Field
\r
16 * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
\r
19 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
\r
22 * Create a new ItemSelector
\r
23 * @param {Object} config Configuration options
\r
24 * @xtype itemselector
\r
26 Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
\r
30 iconDown:"down2.gif",
\r
31 iconLeft:"left2.gif",
\r
32 iconRight:"right2.gif",
\r
34 iconBottom:"bottom2.gif",
\r
44 defaultAutoCreate:{tag: "div"},
\r
46 * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
\r
50 initComponent: function(){
\r
51 Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
\r
53 'rowdblclick' : true,
\r
58 onRender: function(ct, position){
\r
59 Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
\r
61 // Internal default configuration for both multiselects
\r
63 legend: 'Available',
\r
76 this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
\r
77 this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
\r
79 this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
\r
80 this.toMultiselect.on('dblclick', this.onRowDblClick, this);
\r
82 var p = new Ext.Panel({
\r
83 bodyStyle:this.bodyStyle,
\r
86 layoutConfig:{columns:3}
\r
89 p.add(this.fromMultiselect);
\r
90 var icons = new Ext.Panel({header:false});
\r
92 p.add(this.toMultiselect);
\r
94 icons.el.down('.'+icons.bwrapCls).remove();
\r
97 if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
\r
98 this.imagePath+="/";
\r
99 this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
\r
100 this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
\r
101 this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
\r
102 this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
\r
103 this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
\r
104 this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
\r
105 var el=icons.getEl();
\r
106 this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
\r
107 el.createChild({tag: 'br'});
\r
108 this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
\r
109 el.createChild({tag: 'br'});
\r
110 this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
\r
111 el.createChild({tag: 'br'});
\r
112 this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
\r
113 el.createChild({tag: 'br'});
\r
114 this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
\r
115 el.createChild({tag: 'br'});
\r
116 this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
\r
117 this.toTopIcon.on('click', this.toTop, this);
\r
118 this.upIcon.on('click', this.up, this);
\r
119 this.downIcon.on('click', this.down, this);
\r
120 this.toBottomIcon.on('click', this.toBottom, this);
\r
121 this.addIcon.on('click', this.fromTo, this);
\r
122 this.removeIcon.on('click', this.toFrom, this);
\r
123 if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
\r
124 if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
\r
125 if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
\r
126 if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
\r
127 if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
\r
128 if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
\r
130 var tb = p.body.first();
\r
131 this.el.setWidth(p.body.first().getWidth());
\r
132 p.body.removeClass();
\r
134 this.hiddenName = this.name;
\r
135 var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
\r
136 this.hiddenField = this.el.createChild(hiddenTag);
\r
139 doLayout: function(){
\r
141 this.fromMultiselect.fs.doLayout();
\r
142 this.toMultiselect.fs.doLayout();
\r
146 afterRender: function(){
\r
147 Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
\r
149 this.toStore = this.toMultiselect.store;
\r
150 this.toStore.on('add', this.valueChanged, this);
\r
151 this.toStore.on('remove', this.valueChanged, this);
\r
152 this.toStore.on('load', this.valueChanged, this);
\r
153 this.valueChanged(this.toStore);
\r
156 toTop : function() {
\r
157 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
159 if (selectionsArray.length > 0) {
\r
160 selectionsArray.sort();
\r
161 for (var i=0; i<selectionsArray.length; i++) {
\r
162 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
163 records.push(record);
\r
165 selectionsArray = [];
\r
166 for (var i=records.length-1; i>-1; i--) {
\r
167 record = records[i];
\r
168 this.toMultiselect.view.store.remove(record);
\r
169 this.toMultiselect.view.store.insert(0, record);
\r
170 selectionsArray.push(((records.length - 1) - i));
\r
173 this.toMultiselect.view.refresh();
\r
174 this.toMultiselect.view.select(selectionsArray);
\r
177 toBottom : function() {
\r
178 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
180 if (selectionsArray.length > 0) {
\r
181 selectionsArray.sort();
\r
182 for (var i=0; i<selectionsArray.length; i++) {
\r
183 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
184 records.push(record);
\r
186 selectionsArray = [];
\r
187 for (var i=0; i<records.length; i++) {
\r
188 record = records[i];
\r
189 this.toMultiselect.view.store.remove(record);
\r
190 this.toMultiselect.view.store.add(record);
\r
191 selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
\r
194 this.toMultiselect.view.refresh();
\r
195 this.toMultiselect.view.select(selectionsArray);
\r
200 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
201 selectionsArray.sort();
\r
202 var newSelectionsArray = [];
\r
203 if (selectionsArray.length > 0) {
\r
204 for (var i=0; i<selectionsArray.length; i++) {
\r
205 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
206 if ((selectionsArray[i] - 1) >= 0) {
\r
207 this.toMultiselect.view.store.remove(record);
\r
208 this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
\r
209 newSelectionsArray.push(selectionsArray[i] - 1);
\r
212 this.toMultiselect.view.refresh();
\r
213 this.toMultiselect.view.select(newSelectionsArray);
\r
217 down : function() {
\r
219 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
220 selectionsArray.sort();
\r
221 selectionsArray.reverse();
\r
222 var newSelectionsArray = [];
\r
223 if (selectionsArray.length > 0) {
\r
224 for (var i=0; i<selectionsArray.length; i++) {
\r
225 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
226 if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
\r
227 this.toMultiselect.view.store.remove(record);
\r
228 this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
\r
229 newSelectionsArray.push(selectionsArray[i] + 1);
\r
232 this.toMultiselect.view.refresh();
\r
233 this.toMultiselect.view.select(newSelectionsArray);
\r
237 fromTo : function() {
\r
238 var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
\r
240 if (selectionsArray.length > 0) {
\r
241 for (var i=0; i<selectionsArray.length; i++) {
\r
242 record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
\r
243 records.push(record);
\r
245 if(!this.allowDup)selectionsArray = [];
\r
246 for (var i=0; i<records.length; i++) {
\r
247 record = records[i];
\r
249 var x=new Ext.data.Record();
\r
252 this.toMultiselect.view.store.add(record);
\r
254 this.fromMultiselect.view.store.remove(record);
\r
255 this.toMultiselect.view.store.add(record);
\r
256 selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
\r
260 this.toMultiselect.view.refresh();
\r
261 this.fromMultiselect.view.refresh();
\r
262 var si = this.toMultiselect.store.sortInfo;
\r
264 this.toMultiselect.store.sort(si.field, si.direction);
\r
266 this.toMultiselect.view.select(selectionsArray);
\r
269 toFrom : function() {
\r
270 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
272 if (selectionsArray.length > 0) {
\r
273 for (var i=0; i<selectionsArray.length; i++) {
\r
274 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
275 records.push(record);
\r
277 selectionsArray = [];
\r
278 for (var i=0; i<records.length; i++) {
\r
279 record = records[i];
\r
280 this.toMultiselect.view.store.remove(record);
\r
281 if(!this.allowDup){
\r
282 this.fromMultiselect.view.store.add(record);
\r
283 selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
\r
287 this.fromMultiselect.view.refresh();
\r
288 this.toMultiselect.view.refresh();
\r
289 var si = this.fromMultiselect.store.sortInfo;
\r
291 this.fromMultiselect.store.sort(si.field, si.direction);
\r
293 this.fromMultiselect.view.select(selectionsArray);
\r
296 valueChanged: function(store) {
\r
299 for (var i=0; i<store.getCount(); i++) {
\r
300 record = store.getAt(i);
\r
301 values.push(record.get(this.toMultiselect.valueField));
\r
303 this.hiddenField.dom.value = values.join(this.delimiter);
\r
304 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
\r
307 getValue : function() {
\r
308 return this.hiddenField.dom.value;
\r
311 onRowDblClick : function(vw, index, node, e) {
\r
312 if (vw == this.toMultiselect.view){
\r
314 } else if (vw == this.fromMultiselect.view) {
\r
317 return this.fireEvent('rowdblclick', vw, index, node, e);
\r
321 range = this.toMultiselect.store.getRange();
\r
322 this.toMultiselect.store.removeAll();
\r
323 this.fromMultiselect.store.add(range);
\r
324 var si = this.fromMultiselect.store.sortInfo;
\r
326 this.fromMultiselect.store.sort(si.field, si.direction);
\r
328 this.valueChanged(this.toMultiselect.store);
\r
332 Ext.reg('itemselector', Ext.ux.form.ItemSelector);
\r
335 Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
\r