开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
ItemSelector.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：13k
源码类别：

中间件编程

开发平台：

JavaScript

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