+++ /dev/null
-<html>
-<head>
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body onload="prettyPrint();">
- <pre class="prettyprint lang-js">/*\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
-<div id="cls-Ext.ux.form.ItemSelector"></div>/**\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
- <div id="cfg-Ext.ux.form.ItemSelector-multiselects"></div>/**\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
-</pre>
-</body>
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff