/source/Plug-in/ext/ItemSelector.js
http://prosporous.googlecode.com/ · JavaScript · 361 lines · 313 code · 23 blank · 25 comment · 52 complexity · 9545b01711020697a922fcd694d45ce5 MD5 · raw file
- /*
- * Ext JS Library 2.2
- * Copyright(c) 2006-2008, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://extjs.com/license
- */
-
- /*
- * 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.ItemSelector
- * @extends Ext.form.Field
- * A control that allows selection of between two Ext.ux.MultiSelect controls.
- *
- * @history
- * 2008-06-19 bpm Original code contributed by Toby Stuart
- *
- * @constructor
- * Create a new ItemSelector
- * @param {Object} config Configuration options
- */
- Ext.ux.ItemSelector = Ext.extend(Ext.form.Field, {
- msWidth:200,
- msHeight:300,
- 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,
- fromStore:null,
- toStore:null,
- fromData:null,
- toData:null,
- displayField:0,
- valueField:1,
- switchToFrom:false,
- allowDup:false,
- focusClass:undefined,
- delimiter:',',
- readOnly:false,
- toLegend:null,
- fromLegend:null,
- toSortField:null,
- fromSortField:null,
- toSortDir:'ASC',
- fromSortDir:'ASC',
- toTBar:null,
- fromTBar:null,
- bodyStyle:null,
- border:false,
- defaultAutoCreate:{tag: "div"},
-
- initComponent: function(){
- Ext.ux.ItemSelector.superclass.initComponent.call(this);
- this.addEvents({
- 'rowdblclick' : true,
- 'change' : true
- });
- },
- onRender: function(ct, position){
- Ext.ux.ItemSelector.superclass.onRender.call(this, ct, position);
- this.fromMultiselect = new Ext.ux.Multiselect({
- legend: this.fromLegend,
- delimiter: this.delimiter,
- allowDup: this.allowDup,
- copy: this.allowDup,
- allowTrash: this.allowDup,
- dragGroup: this.readOnly ? null : "drop2-"+this.el.dom.id,
- dropGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
- width: this.msWidth,
- height: this.msHeight,
- dataFields: this.dataFields,
- data: this.fromData,
- displayField: this.displayField,
- valueField: this.valueField,
- store: this.fromStore,
- isFormField: false,
- tbar: this.fromTBar,
- appendOnly: true,
- sortField: this.fromSortField,
- sortDir: this.fromSortDir
- });
- this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
- if (!this.toStore) {
- this.toStore = new Ext.data.SimpleStore({
- fields: this.dataFields,
- data : this.toData
- });
- }
- this.toStore.on('add', this.valueChanged, this);
- this.toStore.on('remove', this.valueChanged, this);
- this.toStore.on('load', this.valueChanged, this);
- this.toMultiselect = new Ext.ux.Multiselect({
- legend: this.toLegend,
- delimiter: this.delimiter,
- allowDup: this.allowDup,
- dragGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
- //dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+(this.toSortField ? "" : ",drop1-"+this.el.dom.id),
- dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+",drop1-"+this.el.dom.id,
- width: this.msWidth,
- height: this.msHeight,
- displayField: this.displayField,
- valueField: this.valueField,
- store: this.toStore,
- isFormField: false,
- tbar: this.toTBar,
- sortField: this.toSortField,
- sortDir: this.toSortDir
- });
- 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.switchToFrom ? this.toMultiselect : this.fromMultiselect);
- var icons = new Ext.Panel({header:false});
- p.add(icons);
- p.add(this.switchToFrom ? this.fromMultiselect : this.toMultiselect);
- p.render(this.el);
- icons.el.down('.'+icons.bwrapCls).remove();
- 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();
- if (!this.toSortField) {
- 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.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
- el.createChild({tag: 'br'});
- this.removeIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
- el.createChild({tag: 'br'});
- if (!this.toSortField) {
- 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'}});
- }
- if (!this.readOnly) {
- if (!this.toSortField) {
- 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);
- this.valueChanged(this.toStore);
- },
-
- initValue:Ext.emptyFn,
-
- 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();
- if(this.toSortField)this.toMultiselect.store.sort(this.toSortField, this.toSortDir);
- if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);
- else 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();
- if(this.fromSortField)this.fromMultiselect.store.sort(this.fromSortField, this.fromSortDir);
- 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.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) {
- return this.fireEvent('rowdblclick', vw, index, node, e);
- },
-
- reset: function(){
- range = this.toMultiselect.store.getRange();
- this.toMultiselect.store.removeAll();
- if (!this.allowDup) {
- this.fromMultiselect.store.add(range);
- this.fromMultiselect.store.sort(this.displayField,'ASC');
- }
- this.valueChanged(this.toMultiselect.store);
- }
- });
- Ext.reg("itemselector", Ext.ux.ItemSelector);