Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / ux / ItemSelector.js
diff --git a/examples/ux/ItemSelector.js b/examples/ux/ItemSelector.js
new file mode 100644 (file)
index 0000000..f16cf79
--- /dev/null
@@ -0,0 +1,335 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * 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