ItemSelector.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:13k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /*
  2.  * Note that this control will most likely remain as an example, and not as a core Ext form
  3.  * control.  However, the API will be changing in a future release and so should not yet be
  4.  * treated as a final, stable API at this time.
  5.  */
  6. /**
  7.  * @class Ext.ux.form.ItemSelector
  8.  * @extends Ext.form.Field
  9.  * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
  10.  *
  11.  *  @history
  12.  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
  13.  *
  14.  * @constructor
  15.  * Create a new ItemSelector
  16.  * @param {Object} config Configuration options
  17.  * @xtype itemselector 
  18.  */
  19. Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
  20.     hideNavIcons:false,
  21.     imagePath:"",
  22.     iconUp:"up2.gif",
  23.     iconDown:"down2.gif",
  24.     iconLeft:"left2.gif",
  25.     iconRight:"right2.gif",
  26.     iconTop:"top2.gif",
  27.     iconBottom:"bottom2.gif",
  28.     drawUpIcon:true,
  29.     drawDownIcon:true,
  30.     drawLeftIcon:true,
  31.     drawRightIcon:true,
  32.     drawTopIcon:true,
  33.     drawBotIcon:true,
  34.     delimiter:',',
  35.     bodyStyle:null,
  36.     border:false,
  37.     defaultAutoCreate:{tag: "div"},
  38.     /**
  39.      * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
  40.      */
  41.     multiselects:null,
  42.     initComponent: function(){
  43.         Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
  44.         this.addEvents({
  45.             'rowdblclick' : true,
  46.             'change' : true
  47.         });
  48.     },
  49.     onRender: function(ct, position){
  50.         Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
  51.         // Internal default configuration for both multiselects
  52.         var msConfig = [{
  53.             legend: 'Available',
  54.             draggable: true,
  55.             droppable: true,
  56.             width: 100,
  57.             height: 100
  58.         },{
  59.             legend: 'Selected',
  60.             droppable: true,
  61.             draggable: true,
  62.             width: 100,
  63.             height: 100
  64.         }];
  65.         this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
  66.         this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
  67.         this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
  68.         this.toMultiselect.on('dblclick', this.onRowDblClick, this);
  69.         var p = new Ext.Panel({
  70.             bodyStyle:this.bodyStyle,
  71.             border:this.border,
  72.             layout:"table",
  73.             layoutConfig:{columns:3}
  74.         });
  75.         p.add(this.fromMultiselect);
  76.         var icons = new Ext.Panel({header:false});
  77.         p.add(icons);
  78.         p.add(this.toMultiselect);
  79.         p.render(this.el);
  80.         icons.el.down('.'+icons.bwrapCls).remove();
  81.         // ICON HELL!!!
  82.         if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
  83.             this.imagePath+="/";
  84.         this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
  85.         this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
  86.         this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
  87.         this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
  88.         this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
  89.         this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
  90.         var el=icons.getEl();
  91.         this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
  92.         el.createChild({tag: 'br'});
  93.         this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
  94.         el.createChild({tag: 'br'});
  95.         this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
  96.         el.createChild({tag: 'br'});
  97.         this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
  98.         el.createChild({tag: 'br'});
  99.         this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
  100.         el.createChild({tag: 'br'});
  101.         this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
  102.         this.toTopIcon.on('click', this.toTop, this);
  103.         this.upIcon.on('click', this.up, this);
  104.         this.downIcon.on('click', this.down, this);
  105.         this.toBottomIcon.on('click', this.toBottom, this);
  106.         this.addIcon.on('click', this.fromTo, this);
  107.         this.removeIcon.on('click', this.toFrom, this);
  108.         if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
  109.         if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
  110.         if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
  111.         if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
  112.         if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
  113.         if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
  114.         var tb = p.body.first();
  115.         this.el.setWidth(p.body.first().getWidth());
  116.         p.body.removeClass();
  117.         this.hiddenName = this.name;
  118.         var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
  119.         this.hiddenField = this.el.createChild(hiddenTag);
  120.     },
  121.     
  122.     doLayout: function(){
  123.         if(this.rendered){
  124.             this.fromMultiselect.fs.doLayout();
  125.             this.toMultiselect.fs.doLayout();
  126.         }
  127.     },
  128.     afterRender: function(){
  129.         Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
  130.         this.toStore = this.toMultiselect.store;
  131.         this.toStore.on('add', this.valueChanged, this);
  132.         this.toStore.on('remove', this.valueChanged, this);
  133.         this.toStore.on('load', this.valueChanged, this);
  134.         this.valueChanged(this.toStore);
  135.     },
  136.     toTop : function() {
  137.         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  138.         var records = [];
  139.         if (selectionsArray.length > 0) {
  140.             selectionsArray.sort();
  141.             for (var i=0; i<selectionsArray.length; i++) {
  142.                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  143.                 records.push(record);
  144.             }
  145.             selectionsArray = [];
  146.             for (var i=records.length-1; i>-1; i--) {
  147.                 record = records[i];
  148.                 this.toMultiselect.view.store.remove(record);
  149.                 this.toMultiselect.view.store.insert(0, record);
  150.                 selectionsArray.push(((records.length - 1) - i));
  151.             }
  152.         }
  153.         this.toMultiselect.view.refresh();
  154.         this.toMultiselect.view.select(selectionsArray);
  155.     },
  156.     toBottom : function() {
  157.         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  158.         var records = [];
  159.         if (selectionsArray.length > 0) {
  160.             selectionsArray.sort();
  161.             for (var i=0; i<selectionsArray.length; i++) {
  162.                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  163.                 records.push(record);
  164.             }
  165.             selectionsArray = [];
  166.             for (var i=0; i<records.length; i++) {
  167.                 record = records[i];
  168.                 this.toMultiselect.view.store.remove(record);
  169.                 this.toMultiselect.view.store.add(record);
  170.                 selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
  171.             }
  172.         }
  173.         this.toMultiselect.view.refresh();
  174.         this.toMultiselect.view.select(selectionsArray);
  175.     },
  176.     up : function() {
  177.         var record = null;
  178.         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  179.         selectionsArray.sort();
  180.         var newSelectionsArray = [];
  181.         if (selectionsArray.length > 0) {
  182.             for (var i=0; i<selectionsArray.length; i++) {
  183.                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  184.                 if ((selectionsArray[i] - 1) >= 0) {
  185.                     this.toMultiselect.view.store.remove(record);
  186.                     this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
  187.                     newSelectionsArray.push(selectionsArray[i] - 1);
  188.                 }
  189.             }
  190.             this.toMultiselect.view.refresh();
  191.             this.toMultiselect.view.select(newSelectionsArray);
  192.         }
  193.     },
  194.     down : function() {
  195.         var record = null;
  196.         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  197.         selectionsArray.sort();
  198.         selectionsArray.reverse();
  199.         var newSelectionsArray = [];
  200.         if (selectionsArray.length > 0) {
  201.             for (var i=0; i<selectionsArray.length; i++) {
  202.                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  203.                 if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
  204.                     this.toMultiselect.view.store.remove(record);
  205.                     this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
  206.                     newSelectionsArray.push(selectionsArray[i] + 1);
  207.                 }
  208.             }
  209.             this.toMultiselect.view.refresh();
  210.             this.toMultiselect.view.select(newSelectionsArray);
  211.         }
  212.     },
  213.     fromTo : function() {
  214.         var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
  215.         var records = [];
  216.         if (selectionsArray.length > 0) {
  217.             for (var i=0; i<selectionsArray.length; i++) {
  218.                 record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
  219.                 records.push(record);
  220.             }
  221.             if(!this.allowDup)selectionsArray = [];
  222.             for (var i=0; i<records.length; i++) {
  223.                 record = records[i];
  224.                 if(this.allowDup){
  225.                     var x=new Ext.data.Record();
  226.                     record.id=x.id;
  227.                     delete x;
  228.                     this.toMultiselect.view.store.add(record);
  229.                 }else{
  230.                     this.fromMultiselect.view.store.remove(record);
  231.                     this.toMultiselect.view.store.add(record);
  232.                     selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
  233.                 }
  234.             }
  235.         }
  236.         this.toMultiselect.view.refresh();
  237.         this.fromMultiselect.view.refresh();
  238.         var si = this.toMultiselect.store.sortInfo;
  239.         if(si){
  240.             this.toMultiselect.store.sort(si.field, si.direction);
  241.         }
  242.         this.toMultiselect.view.select(selectionsArray);
  243.     },
  244.     toFrom : function() {
  245.         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  246.         var records = [];
  247.         if (selectionsArray.length > 0) {
  248.             for (var i=0; i<selectionsArray.length; i++) {
  249.                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  250.                 records.push(record);
  251.             }
  252.             selectionsArray = [];
  253.             for (var i=0; i<records.length; i++) {
  254.                 record = records[i];
  255.                 this.toMultiselect.view.store.remove(record);
  256.                 if(!this.allowDup){
  257.                     this.fromMultiselect.view.store.add(record);
  258.                     selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
  259.                 }
  260.             }
  261.         }
  262.         this.fromMultiselect.view.refresh();
  263.         this.toMultiselect.view.refresh();
  264.         var si = this.fromMultiselect.store.sortInfo;
  265.         if (si){
  266.             this.fromMultiselect.store.sort(si.field, si.direction);
  267.         }
  268.         this.fromMultiselect.view.select(selectionsArray);
  269.     },
  270.     valueChanged: function(store) {
  271.         var record = null;
  272.         var values = [];
  273.         for (var i=0; i<store.getCount(); i++) {
  274.             record = store.getAt(i);
  275.             values.push(record.get(this.toMultiselect.valueField));
  276.         }
  277.         this.hiddenField.dom.value = values.join(this.delimiter);
  278.         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
  279.     },
  280.     getValue : function() {
  281.         return this.hiddenField.dom.value;
  282.     },
  283.     onRowDblClick : function(vw, index, node, e) {
  284.         if (vw == this.toMultiselect.view){
  285.             this.toFrom();
  286.         } else if (vw == this.fromMultiselect.view) {
  287.             this.fromTo();
  288.         }
  289.         return this.fireEvent('rowdblclick', vw, index, node, e);
  290.     },
  291.     reset: function(){
  292.         range = this.toMultiselect.store.getRange();
  293.         this.toMultiselect.store.removeAll();
  294.         this.fromMultiselect.store.add(range);
  295.         var si = this.fromMultiselect.store.sortInfo;
  296.         if (si){
  297.             this.fromMultiselect.store.sort(si.field, si.direction);
  298.         }
  299.         this.valueChanged(this.toMultiselect.store);
  300.     }
  301. });
  302. Ext.reg('itemselector', Ext.ux.form.ItemSelector);
  303. //backwards compat
  304. Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;