Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / ux / ItemSelector.js
index c925bd0..d8b620c 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-/*\r
- * Note that this control will most likely remain as an example, and not as a core Ext form\r
- * control.  However, the API will be changing in a future release and so should not yet be\r
- * treated as a final, stable API at this time.\r
- */\r
-\r
-/**\r
- * @class Ext.ux.form.ItemSelector\r
- * @extends Ext.form.Field\r
- * A control that allows selection of between two Ext.ux.form.MultiSelect controls.\r
- *\r
- *  @history\r
- *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- *\r
- * @constructor\r
- * Create a new ItemSelector\r
- * @param {Object} config Configuration options\r
- * @xtype itemselector \r
- */\r
-Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {\r
-    hideNavIcons:false,\r
-    imagePath:"",\r
-    iconUp:"up2.gif",\r
-    iconDown:"down2.gif",\r
-    iconLeft:"left2.gif",\r
-    iconRight:"right2.gif",\r
-    iconTop:"top2.gif",\r
-    iconBottom:"bottom2.gif",\r
-    drawUpIcon:true,\r
-    drawDownIcon:true,\r
-    drawLeftIcon:true,\r
-    drawRightIcon:true,\r
-    drawTopIcon:true,\r
-    drawBotIcon:true,\r
-    delimiter:',',\r
-    bodyStyle:null,\r
-    border:false,\r
-    defaultAutoCreate:{tag: "div"},\r
-    /**\r
-     * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)\r
-     */\r
-    multiselects:null,\r
-\r
-    initComponent: function(){\r
-        Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
-        this.addEvents({\r
-            'rowdblclick' : true,\r
-            'change' : true\r
-        });\r
-    },\r
-\r
-    onRender: function(ct, position){\r
-        Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);\r
-\r
-        // Internal default configuration for both multiselects\r
-        var msConfig = [{\r
-            legend: 'Available',\r
-            draggable: true,\r
-            droppable: true,\r
-            width: 100,\r
-            height: 100\r
-        },{\r
-            legend: 'Selected',\r
-            droppable: true,\r
-            draggable: true,\r
-            width: 100,\r
-            height: 100\r
-        }];\r
-\r
-        this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));\r
-        this.fromMultiselect.on('dblclick', this.onRowDblClick, this);\r
-\r
-        this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));\r
-        this.toMultiselect.on('dblclick', this.onRowDblClick, this);\r
-\r
-        var p = new Ext.Panel({\r
-            bodyStyle:this.bodyStyle,\r
-            border:this.border,\r
-            layout:"table",\r
-            layoutConfig:{columns:3}\r
-        });\r
-\r
-        p.add(this.fromMultiselect);\r
-        var icons = new Ext.Panel({header:false});\r
-        p.add(icons);\r
-        p.add(this.toMultiselect);\r
-        p.render(this.el);\r
-        icons.el.down('.'+icons.bwrapCls).remove();\r
-\r
-        // ICON HELL!!!\r
-        if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")\r
-            this.imagePath+="/";\r
-        this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');\r
-        this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');\r
-        this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');\r
-        this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');\r
-        this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');\r
-        this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');\r
-        var el=icons.getEl();\r
-        this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});\r
-        el.createChild({tag: 'br'});\r
-        this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});\r
-        el.createChild({tag: 'br'});\r
-        this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});\r
-        el.createChild({tag: 'br'});\r
-        this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});\r
-        el.createChild({tag: 'br'});\r
-        this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});\r
-        el.createChild({tag: 'br'});\r
-        this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});\r
-        this.toTopIcon.on('click', this.toTop, this);\r
-        this.upIcon.on('click', this.up, this);\r
-        this.downIcon.on('click', this.down, this);\r
-        this.toBottomIcon.on('click', this.toBottom, this);\r
-        this.addIcon.on('click', this.fromTo, this);\r
-        this.removeIcon.on('click', this.toFrom, this);\r
-        if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }\r
-        if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }\r
-        if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }\r
-        if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }\r
-        if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }\r
-        if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }\r
-\r
-        var tb = p.body.first();\r
-        this.el.setWidth(p.body.first().getWidth());\r
-        p.body.removeClass();\r
-\r
-        this.hiddenName = this.name;\r
-        var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};\r
-        this.hiddenField = this.el.createChild(hiddenTag);\r
-    },\r
-    \r
-    doLayout: function(){\r
-        if(this.rendered){\r
-            this.fromMultiselect.fs.doLayout();\r
-            this.toMultiselect.fs.doLayout();\r
-        }\r
-    },\r
-\r
-    afterRender: function(){\r
-        Ext.ux.form.ItemSelector.superclass.afterRender.call(this);\r
-\r
-        this.toStore = this.toMultiselect.store;\r
-        this.toStore.on('add', this.valueChanged, this);\r
-        this.toStore.on('remove', this.valueChanged, this);\r
-        this.toStore.on('load', this.valueChanged, this);\r
-        this.valueChanged(this.toStore);\r
-    },\r
-\r
-    toTop : function() {\r
-        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
-        var records = [];\r
-        if (selectionsArray.length > 0) {\r
-            selectionsArray.sort();\r
-            for (var i=0; i<selectionsArray.length; i++) {\r
-                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
-                records.push(record);\r
-            }\r
-            selectionsArray = [];\r
-            for (var i=records.length-1; i>-1; i--) {\r
-                record = records[i];\r
-                this.toMultiselect.view.store.remove(record);\r
-                this.toMultiselect.view.store.insert(0, record);\r
-                selectionsArray.push(((records.length - 1) - i));\r
-            }\r
-        }\r
-        this.toMultiselect.view.refresh();\r
-        this.toMultiselect.view.select(selectionsArray);\r
-    },\r
-\r
-    toBottom : function() {\r
-        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
-        var records = [];\r
-        if (selectionsArray.length > 0) {\r
-            selectionsArray.sort();\r
-            for (var i=0; i<selectionsArray.length; i++) {\r
-                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
-                records.push(record);\r
-            }\r
-            selectionsArray = [];\r
-            for (var i=0; i<records.length; i++) {\r
-                record = records[i];\r
-                this.toMultiselect.view.store.remove(record);\r
-                this.toMultiselect.view.store.add(record);\r
-                selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));\r
-            }\r
-        }\r
-        this.toMultiselect.view.refresh();\r
-        this.toMultiselect.view.select(selectionsArray);\r
-    },\r
-\r
-    up : function() {\r
-        var record = null;\r
-        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
-        selectionsArray.sort();\r
-        var newSelectionsArray = [];\r
-        if (selectionsArray.length > 0) {\r
-            for (var i=0; i<selectionsArray.length; i++) {\r
-                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
-                if ((selectionsArray[i] - 1) >= 0) {\r
-                    this.toMultiselect.view.store.remove(record);\r
-                    this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);\r
-                    newSelectionsArray.push(selectionsArray[i] - 1);\r
-                }\r
-            }\r
-            this.toMultiselect.view.refresh();\r
-            this.toMultiselect.view.select(newSelectionsArray);\r
-        }\r
-    },\r
-\r
-    down : function() {\r
-        var record = null;\r
-        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
-        selectionsArray.sort();\r
-        selectionsArray.reverse();\r
-        var newSelectionsArray = [];\r
-        if (selectionsArray.length > 0) {\r
-            for (var i=0; i<selectionsArray.length; i++) {\r
-                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
-                if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {\r
-                    this.toMultiselect.view.store.remove(record);\r
-                    this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);\r
-                    newSelectionsArray.push(selectionsArray[i] + 1);\r
-                }\r
-            }\r
-            this.toMultiselect.view.refresh();\r
-            this.toMultiselect.view.select(newSelectionsArray);\r
-        }\r
-    },\r
-\r
-    fromTo : function() {\r
-        var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();\r
-        var records = [];\r
-        if (selectionsArray.length > 0) {\r
-            for (var i=0; i<selectionsArray.length; i++) {\r
-                record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);\r
-                records.push(record);\r
-            }\r
-            if(!this.allowDup)selectionsArray = [];\r
-            for (var i=0; i<records.length; i++) {\r
-                record = records[i];\r
-                if(this.allowDup){\r
-                    var x=new Ext.data.Record();\r
-                    record.id=x.id;\r
-                    delete x;\r
-                    this.toMultiselect.view.store.add(record);\r
-                }else{\r
-                    this.fromMultiselect.view.store.remove(record);\r
-                    this.toMultiselect.view.store.add(record);\r
-                    selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));\r
-                }\r
-            }\r
-        }\r
-        this.toMultiselect.view.refresh();\r
-        this.fromMultiselect.view.refresh();\r
-        var si = this.toMultiselect.store.sortInfo;\r
-        if(si){\r
-            this.toMultiselect.store.sort(si.field, si.direction);\r
-        }\r
-        this.toMultiselect.view.select(selectionsArray);\r
-    },\r
-\r
-    toFrom : function() {\r
-        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
-        var records = [];\r
-        if (selectionsArray.length > 0) {\r
-            for (var i=0; i<selectionsArray.length; i++) {\r
-                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
-                records.push(record);\r
-            }\r
-            selectionsArray = [];\r
-            for (var i=0; i<records.length; i++) {\r
-                record = records[i];\r
-                this.toMultiselect.view.store.remove(record);\r
-                if(!this.allowDup){\r
-                    this.fromMultiselect.view.store.add(record);\r
-                    selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));\r
-                }\r
-            }\r
-        }\r
-        this.fromMultiselect.view.refresh();\r
-        this.toMultiselect.view.refresh();\r
-        var si = this.fromMultiselect.store.sortInfo;\r
-        if (si){\r
-            this.fromMultiselect.store.sort(si.field, si.direction);\r
-        }\r
-        this.fromMultiselect.view.select(selectionsArray);\r
-    },\r
-\r
-    valueChanged: function(store) {\r
-        var record = null;\r
-        var values = [];\r
-        for (var i=0; i<store.getCount(); i++) {\r
-            record = store.getAt(i);\r
-            values.push(record.get(this.toMultiselect.valueField));\r
-        }\r
-        this.hiddenField.dom.value = values.join(this.delimiter);\r
-        this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
-    },\r
-\r
-    getValue : function() {\r
-        return this.hiddenField.dom.value;\r
-    },\r
-\r
-    onRowDblClick : function(vw, index, node, e) {\r
-        if (vw == this.toMultiselect.view){\r
-            this.toFrom();\r
-        } else if (vw == this.fromMultiselect.view) {\r
-            this.fromTo();\r
-        }\r
-        return this.fireEvent('rowdblclick', vw, index, node, e);\r
-    },\r
-\r
-    reset: function(){\r
-        range = this.toMultiselect.store.getRange();\r
-        this.toMultiselect.store.removeAll();\r
-        this.fromMultiselect.store.add(range);\r
-        var si = this.fromMultiselect.store.sortInfo;\r
-        if (si){\r
-            this.fromMultiselect.store.sort(si.field, si.direction);\r
-        }\r
-        this.valueChanged(this.toMultiselect.store);\r
-    }\r
-});\r
-\r
-Ext.reg('itemselector', Ext.ux.form.ItemSelector);\r
-\r
-//backwards compat\r
-Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;\r
+/*
+ * Note that this control will most likely remain as an example, and not as a core Ext form
+ * control.  However, the API will be changing in a future release and so should not yet be
+ * treated as a final, stable API at this time.
+ */
+
+/**
+ * @class Ext.ux.form.ItemSelector
+ * @extends Ext.form.Field
+ * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
+ *
+ *  @history
+ *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
+ *
+ * @constructor
+ * Create a new ItemSelector
+ * @param {Object} config Configuration options
+ * @xtype itemselector 
+ */
+Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
+    hideNavIcons:false,
+    imagePath:"",
+    iconUp:"up2.gif",
+    iconDown:"down2.gif",
+    iconLeft:"left2.gif",
+    iconRight:"right2.gif",
+    iconTop:"top2.gif",
+    iconBottom:"bottom2.gif",
+    drawUpIcon:true,
+    drawDownIcon:true,
+    drawLeftIcon:true,
+    drawRightIcon:true,
+    drawTopIcon:true,
+    drawBotIcon:true,
+    delimiter:',',
+    bodyStyle:null,
+    border:false,
+    defaultAutoCreate:{tag: "div"},
+    /**
+     * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
+     */
+    multiselects:null,
+
+    initComponent: function(){
+        Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
+        this.addEvents({
+            'rowdblclick' : true,
+            'change' : true
+        });
+    },
+
+    onRender: function(ct, position){
+        Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
+
+        // Internal default configuration for both multiselects
+        var msConfig = [{
+            legend: 'Available',
+            draggable: true,
+            droppable: true,
+            width: 100,
+            height: 100
+        },{
+            legend: 'Selected',
+            droppable: true,
+            draggable: true,
+            width: 100,
+            height: 100
+        }];
+
+        this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
+        this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
+
+        this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
+        this.toMultiselect.on('dblclick', this.onRowDblClick, this);
+
+        var p = new Ext.Panel({
+            bodyStyle:this.bodyStyle,
+            border:this.border,
+            layout:"table",
+            layoutConfig:{columns:3}
+        });
+
+        p.add(this.fromMultiselect);
+        var icons = new Ext.Panel({header:false});
+        p.add(icons);
+        p.add(this.toMultiselect);
+        p.render(this.el);
+        icons.el.down('.'+icons.bwrapCls).remove();
+
+        // ICON HELL!!!
+        if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
+            this.imagePath+="/";
+        this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
+        this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
+        this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
+        this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
+        this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
+        this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
+        var el=icons.getEl();
+        this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
+        el.createChild({tag: 'br'});
+        this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
+        el.createChild({tag: 'br'});
+        this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
+        el.createChild({tag: 'br'});
+        this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
+        el.createChild({tag: 'br'});
+        this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
+        el.createChild({tag: 'br'});
+        this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
+        this.toTopIcon.on('click', this.toTop, this);
+        this.upIcon.on('click', this.up, this);
+        this.downIcon.on('click', this.down, this);
+        this.toBottomIcon.on('click', this.toBottom, this);
+        this.addIcon.on('click', this.fromTo, this);
+        this.removeIcon.on('click', this.toFrom, this);
+        if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
+        if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
+        if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
+        if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
+        if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
+        if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
+
+        var tb = p.body.first();
+        this.el.setWidth(p.body.first().getWidth());
+        p.body.removeClass();
+
+        this.hiddenName = this.name;
+        var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
+        this.hiddenField = this.el.createChild(hiddenTag);
+    },
+    
+    doLayout: function(){
+        if(this.rendered){
+            this.fromMultiselect.fs.doLayout();
+            this.toMultiselect.fs.doLayout();
+        }
+    },
+
+    afterRender: function(){
+        Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
+
+        this.toStore = this.toMultiselect.store;
+        this.toStore.on('add', this.valueChanged, this);
+        this.toStore.on('remove', this.valueChanged, this);
+        this.toStore.on('load', this.valueChanged, this);
+        this.valueChanged(this.toStore);
+    },
+
+    toTop : function() {
+        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+        var records = [];
+        if (selectionsArray.length > 0) {
+            selectionsArray.sort();
+            for (var i=0; i<selectionsArray.length; i++) {
+                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+                records.push(record);
+            }
+            selectionsArray = [];
+            for (var i=records.length-1; i>-1; i--) {
+                record = records[i];
+                this.toMultiselect.view.store.remove(record);
+                this.toMultiselect.view.store.insert(0, record);
+                selectionsArray.push(((records.length - 1) - i));
+            }
+        }
+        this.toMultiselect.view.refresh();
+        this.toMultiselect.view.select(selectionsArray);
+    },
+
+    toBottom : function() {
+        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+        var records = [];
+        if (selectionsArray.length > 0) {
+            selectionsArray.sort();
+            for (var i=0; i<selectionsArray.length; i++) {
+                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+                records.push(record);
+            }
+            selectionsArray = [];
+            for (var i=0; i<records.length; i++) {
+                record = records[i];
+                this.toMultiselect.view.store.remove(record);
+                this.toMultiselect.view.store.add(record);
+                selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
+            }
+        }
+        this.toMultiselect.view.refresh();
+        this.toMultiselect.view.select(selectionsArray);
+    },
+
+    up : function() {
+        var record = null;
+        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+        selectionsArray.sort();
+        var newSelectionsArray = [];
+        if (selectionsArray.length > 0) {
+            for (var i=0; i<selectionsArray.length; i++) {
+                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+                if ((selectionsArray[i] - 1) >= 0) {
+                    this.toMultiselect.view.store.remove(record);
+                    this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
+                    newSelectionsArray.push(selectionsArray[i] - 1);
+                }
+            }
+            this.toMultiselect.view.refresh();
+            this.toMultiselect.view.select(newSelectionsArray);
+        }
+    },
+
+    down : function() {
+        var record = null;
+        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+        selectionsArray.sort();
+        selectionsArray.reverse();
+        var newSelectionsArray = [];
+        if (selectionsArray.length > 0) {
+            for (var i=0; i<selectionsArray.length; i++) {
+                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+                if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
+                    this.toMultiselect.view.store.remove(record);
+                    this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
+                    newSelectionsArray.push(selectionsArray[i] + 1);
+                }
+            }
+            this.toMultiselect.view.refresh();
+            this.toMultiselect.view.select(newSelectionsArray);
+        }
+    },
+
+    fromTo : function() {
+        var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
+        var records = [];
+        if (selectionsArray.length > 0) {
+            for (var i=0; i<selectionsArray.length; i++) {
+                record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
+                records.push(record);
+            }
+            if(!this.allowDup)selectionsArray = [];
+            for (var i=0; i<records.length; i++) {
+                record = records[i];
+                if(this.allowDup){
+                    var x=new Ext.data.Record();
+                    record.id=x.id;
+                    delete x;
+                    this.toMultiselect.view.store.add(record);
+                }else{
+                    this.fromMultiselect.view.store.remove(record);
+                    this.toMultiselect.view.store.add(record);
+                    selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
+                }
+            }
+        }
+        this.toMultiselect.view.refresh();
+        this.fromMultiselect.view.refresh();
+        var si = this.toMultiselect.store.sortInfo;
+        if(si){
+            this.toMultiselect.store.sort(si.field, si.direction);
+        }
+        this.toMultiselect.view.select(selectionsArray);
+    },
+
+    toFrom : function() {
+        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+        var records = [];
+        if (selectionsArray.length > 0) {
+            for (var i=0; i<selectionsArray.length; i++) {
+                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+                records.push(record);
+            }
+            selectionsArray = [];
+            for (var i=0; i<records.length; i++) {
+                record = records[i];
+                this.toMultiselect.view.store.remove(record);
+                if(!this.allowDup){
+                    this.fromMultiselect.view.store.add(record);
+                    selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
+                }
+            }
+        }
+        this.fromMultiselect.view.refresh();
+        this.toMultiselect.view.refresh();
+        var si = this.fromMultiselect.store.sortInfo;
+        if (si){
+            this.fromMultiselect.store.sort(si.field, si.direction);
+        }
+        this.fromMultiselect.view.select(selectionsArray);
+    },
+
+    valueChanged: function(store) {
+        var record = null;
+        var values = [];
+        for (var i=0; i<store.getCount(); i++) {
+            record = store.getAt(i);
+            values.push(record.get(this.toMultiselect.valueField));
+        }
+        this.hiddenField.dom.value = values.join(this.delimiter);
+        this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+    },
+
+    getValue : function() {
+        return this.hiddenField.dom.value;
+    },
+
+    onRowDblClick : function(vw, index, node, e) {
+        if (vw == this.toMultiselect.view){
+            this.toFrom();
+        } else if (vw == this.fromMultiselect.view) {
+            this.fromTo();
+        }
+        return this.fireEvent('rowdblclick', vw, index, node, e);
+    },
+
+    reset: function(){
+        range = this.toMultiselect.store.getRange();
+        this.toMultiselect.store.removeAll();
+        this.fromMultiselect.store.add(range);
+        var si = this.fromMultiselect.store.sortInfo;
+        if (si){
+            this.fromMultiselect.store.sort(si.field, si.direction);
+        }
+        this.valueChanged(this.toMultiselect.store);
+    }
+});
+
+Ext.reg('itemselector', Ext.ux.form.ItemSelector);
+
+//backwards compat
+Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;