-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * 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.ItemSelector\r
+\r
+/**\r
+ * @class Ext.ux.form.ItemSelector\r
* @extends Ext.form.Field\r
- * A control that allows selection of between two Ext.ux.MultiSelect controls.\r
- * \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
+ *\r
* @constructor\r
* Create a new ItemSelector\r
* @param {Object} config Configuration options\r
+ * @xtype itemselector \r
*/\r
-Ext.ux.ItemSelector = Ext.extend(Ext.form.Field, {\r
- msWidth:200,\r
- msHeight:300,\r
+Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {\r
hideNavIcons:false,\r
imagePath:"",\r
iconUp:"up2.gif",\r
drawRightIcon:true,\r
drawTopIcon:true,\r
drawBotIcon:true,\r
- fromStore:null,\r
- toStore:null,\r
- fromData:null, \r
- toData:null,\r
- displayField:0,\r
- valueField:1,\r
- switchToFrom:false,\r
- allowDup:false,\r
- focusClass:undefined,\r
delimiter:',',\r
- readOnly:false,\r
- toLegend:null,\r
- fromLegend:null,\r
- toSortField:null,\r
- fromSortField:null,\r
- toSortDir:'ASC',\r
- fromSortDir:'ASC',\r
- toTBar:null,\r
- fromTBar:null,\r
bodyStyle:null,\r
border:false,\r
defaultAutoCreate:{tag: "div"},\r
- \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.ItemSelector.superclass.initComponent.call(this);\r
+ Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
this.addEvents({\r
'rowdblclick' : true,\r
'change' : true\r
- }); \r
+ });\r
},\r
\r
onRender: function(ct, position){\r
- Ext.ux.ItemSelector.superclass.onRender.call(this, ct, position);\r
+ Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);\r
\r
- this.fromMultiselect = new Ext.ux.Multiselect({\r
- legend: this.fromLegend,\r
- delimiter: this.delimiter,\r
- allowDup: this.allowDup,\r
- copy: this.allowDup,\r
- allowTrash: this.allowDup,\r
- dragGroup: this.readOnly ? null : "drop2-"+this.el.dom.id,\r
- dropGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,\r
- width: this.msWidth,\r
- height: this.msHeight,\r
- dataFields: this.dataFields,\r
- data: this.fromData,\r
- displayField: this.displayField,\r
- valueField: this.valueField,\r
- store: this.fromStore,\r
- isFormField: false,\r
- tbar: this.fromTBar,\r
- appendOnly: true,\r
- sortField: this.fromSortField,\r
- sortDir: this.fromSortDir\r
- });\r
- this.fromMultiselect.on('dblclick', this.onRowDblClick, this);\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
- if (!this.toStore) {\r
- this.toStore = new Ext.data.SimpleStore({\r
- fields: this.dataFields,\r
- data : this.toData\r
- });\r
- }\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.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.Multiselect({\r
- legend: this.toLegend,\r
- delimiter: this.delimiter,\r
- allowDup: this.allowDup,\r
- dragGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,\r
- //dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+(this.toSortField ? "" : ",drop1-"+this.el.dom.id),\r
- dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+",drop1-"+this.el.dom.id,\r
- width: this.msWidth,\r
- height: this.msHeight,\r
- displayField: this.displayField,\r
- valueField: this.valueField,\r
- store: this.toStore,\r
- isFormField: false,\r
- tbar: this.toTBar,\r
- sortField: this.toSortField,\r
- sortDir: this.toSortDir\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
+\r
var p = new Ext.Panel({\r
bodyStyle:this.bodyStyle,\r
border:this.border,\r
layout:"table",\r
layoutConfig:{columns:3}\r
});\r
- p.add(this.switchToFrom ? this.toMultiselect : this.fromMultiselect);\r
+\r
+ p.add(this.fromMultiselect);\r
var icons = new Ext.Panel({header:false});\r
p.add(icons);\r
- p.add(this.switchToFrom ? this.fromMultiselect : this.toMultiselect);\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.iconTop = this.imagePath + (this.iconTop || 'top2.gif');\r
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');\r
var el=icons.getEl();\r
- if (!this.toSortField) {\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
- }\r
- this.addIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});\r
+ this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});\r
el.createChild({tag: 'br'});\r
- this.removeIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});\r
+ this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});\r
el.createChild({tag: 'br'});\r
- if (!this.toSortField) {\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
- }\r
- if (!this.readOnly) {\r
- if (!this.toSortField) {\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
- }\r
- this.addIcon.on('click', this.fromTo, this);\r
- this.removeIcon.on('click', this.toFrom, this);\r
- }\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
var tb = p.body.first();\r
this.el.setWidth(p.body.first().getWidth());\r
p.body.removeClass();\r
- \r
+\r
this.hiddenName = this.name;\r
- var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};\r
+ var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};\r
this.hiddenField = this.el.createChild(hiddenTag);\r
- this.valueChanged(this.toStore);\r
},\r
\r
- initValue:Ext.emptyFn,\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
this.toMultiselect.view.refresh();\r
this.toMultiselect.view.select(selectionsArray);\r
},\r
- \r
+\r
up : function() {\r
var record = null;\r
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
this.toMultiselect.view.select(newSelectionsArray);\r
}\r
},\r
- \r
+\r
fromTo : function() {\r
var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();\r
var records = [];\r
if(this.allowDup){\r
var x=new Ext.data.Record();\r
record.id=x.id;\r
- delete x; \r
+ delete x;\r
this.toMultiselect.view.store.add(record);\r
}else{\r
this.fromMultiselect.view.store.remove(record);\r
}\r
this.toMultiselect.view.refresh();\r
this.fromMultiselect.view.refresh();\r
- if(this.toSortField)this.toMultiselect.store.sort(this.toSortField, this.toSortDir);\r
- if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);\r
- else this.toMultiselect.view.select(selectionsArray);\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
+\r
toFrom : function() {\r
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
var records = [];\r
}\r
this.fromMultiselect.view.refresh();\r
this.toMultiselect.view.refresh();\r
- if(this.fromSortField)this.fromMultiselect.store.sort(this.fromSortField, this.fromSortDir);\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
+\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.valueField));\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
+\r
getValue : function() {\r
return this.hiddenField.dom.value;\r
},\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
+\r
reset: function(){\r
range = this.toMultiselect.store.getRange();\r
this.toMultiselect.store.removeAll();\r
- if (!this.allowDup) {\r
- this.fromMultiselect.store.add(range);\r
- this.fromMultiselect.store.sort(this.displayField,'ASC');\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.ItemSelector);
\ No newline at end of file
+Ext.reg('itemselector', Ext.ux.form.ItemSelector);\r
+\r
+//backwards compat\r
+Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;\r
git.ithinksw.org / extjs.git / blobdiff