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

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

中间件编程

开发平台：

JavaScript

MultiSelect.js：源码内容
  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.ns('Ext.ux.form');
  3. /**
  4.  * @class Ext.ux.form.MultiSelect
  5.  * @extends Ext.form.Field
  6.  * A control that allows selection and form submission of multiple list items.
  7.  *
  8.  *  @history
  9.  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
  10.  *    2008-06-19 bpm Docs and demo code clean up
  11.  *
  12.  * @constructor
  13.  * Create a new MultiSelect
  14.  * @param {Object} config Configuration options
  15.  * @xtype multiselect 
  16.  */
  17. Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {
  18.     /**
  19.      * @cfg {String} legend Wraps the object with a fieldset and specified legend.
  20.      */
  21.     /**
  22.      * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
  23.      */
  24.     /**
  25.      * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
  26.      */
  27.     /**
  28.      * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
  29.      */
  30.     /**
  31.      * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
  32.      */
  33.     ddReorder:false,
  34.     /**
  35.      * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
  36.      * toolbar config, or an array of buttons/button configs to be added to the toolbar.
  37.      */
  38.     /**
  39.      * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
  40.      * (use for lists which are sorted, defaults to false).
  41.      */
  42.     appendOnly:false,
  43.     /**
  44.      * @cfg {Number} width Width in pixels of the control (defaults to 100).
  45.      */
  46.     width:100,
  47.     /**
  48.      * @cfg {Number} height Height in pixels of the control (defaults to 100).
  49.      */
  50.     height:100,
  51.     /**
  52.      * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
  53.      */
  54.     displayField:0,
  55.     /**
  56.      * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
  57.      */
  58.     valueField:1,
  59.     /**
  60.      * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
  61.      * selection (defaults to true).
  62.      */
  63.     allowBlank:true,
  64.     /**
  65.      * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
  66.      */
  67.     minSelections:0,
  68.     /**
  69.      * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
  70.      */
  71.     maxSelections:Number.MAX_VALUE,
  72.     /**
  73.      * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
  74.      * {@link Ext.form.TextField#blankText}.
  75.      */
  76.     blankText:Ext.form.TextField.prototype.blankText,
  77.     /**
  78.      * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
  79.      * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.
  80.      */
  81.     minSelectionsText:'Minimum {0} item(s) required',
  82.     /**
  83.      * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
  84.      * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.
  85.      */
  86.     maxSelectionsText:'Maximum {0} item(s) allowed',
  87.     /**
  88.      * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
  89.      * (defaults to ',').
  90.      */
  91.     delimiter:',',
  92.     /**
  93.      * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
  94.      * Acceptable values for this property are:
  95.      * <div class="mdetail-params"><ul>
  96.      * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
  97.      * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
  98.      * <div class="mdetail-params"><ul>
  99.      * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
  100.      * A 1-dimensional array will automatically be expanded (each array item will be the combo
  101.      * {@link #valueField value} and {@link #displayField text})</div></li>
  102.      * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
  103.      * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
  104.      * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
  105.      * </div></li></ul></div></li></ul></div>
  106.      */
  108.     // private
  109.     defaultAutoCreate : {tag: "div"},
  111.     // private
  112.     initComponent: function(){
  113.         Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
  115.         if(Ext.isArray(this.store)){
  116.             if (Ext.isArray(this.store[0])){
  117.                 this.store = new Ext.data.ArrayStore({
  118.                     fields: ['value','text'],
  119.                     data: this.store
  120.                 });
  121.                 this.valueField = 'value';
  122.             }else{
  123.                 this.store = new Ext.data.ArrayStore({
  124.                     fields: ['text'],
  125.                     data: this.store,
  126.                     expandData: true
  127.                 });
  128.                 this.valueField = 'text';
  129.             }
  130.             this.displayField = 'text';
  131.         } else {
  132.             this.store = Ext.StoreMgr.lookup(this.store);
  133.         }
  135.         this.addEvents({
  136.             'dblclick' : true,
  137.             'click' : true,
  138.             'change' : true,
  139.             'drop' : true
  140.         });
  141.     },
  143.     // private
  144.     onRender: function(ct, position){
  145.         Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
  147.         var fs = this.fs = new Ext.form.FieldSet({
  148.             renderTo: this.el,
  149.             title: this.legend,
  150.             height: this.height,
  151.             width: this.width,
  152.             style: "padding:0;",
  153.             tbar: this.tbar,
  154.             bodyStyle: 'overflow: auto;'
  155.         });
  157.         this.view = new Ext.ListView({
  158.             multiSelect: true,
  159.             store: this.store,
  160.             columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
  161.             hideHeaders: true
  162.         });
  164.         fs.add(this.view);
  166.         this.view.on('click', this.onViewClick, this);
  167.         this.view.on('beforeclick', this.onViewBeforeClick, this);
  168.         this.view.on('dblclick', this.onViewDblClick, this);
  170.         this.hiddenName = this.name || Ext.id();
  171.         var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
  172.         this.hiddenField = this.el.createChild(hiddenTag);
  173.         this.hiddenField.dom.disabled = this.hiddenName != this.name;
  174.         fs.doLayout();
  175.     },
  177.     // private
  178.     afterRender: function(){
  179.         Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
  181.         if (this.ddReorder && !this.dragGroup && !this.dropGroup){
  182.             this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
  183.         }
  185.         if (this.draggable || this.dragGroup){
  186.             this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
  187.                 ddGroup: this.dragGroup
  188.             });
  189.         }
  190.         if (this.droppable || this.dropGroup){
  191.             this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
  192.                 ddGroup: this.dropGroup
  193.             });
  194.         }
  195.     },
  197.     // private
  198.     onViewClick: function(vw, index, node, e) {
  199.         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
  200.         this.hiddenField.dom.value = this.getValue();
  201.         this.fireEvent('click', this, e);
  202.         this.validate();
  203.     },
  205.     // private
  206.     onViewBeforeClick: function(vw, index, node, e) {
  207.         if (this.disabled) {return false;}
  208.     },
  210.     // private
  211.     onViewDblClick : function(vw, index, node, e) {
  212.         return this.fireEvent('dblclick', vw, index, node, e);
  213.     },
  215.     /**
  216.      * Returns an array of data values for the selected items in the list. The values will be separated
  217.      * by {@link #delimiter}.
  218.      * @return {Array} value An array of string data values
  219.      */
  220.     getValue: function(valueField){
  221.         var returnArray = [];
  222.         var selectionsArray = this.view.getSelectedIndexes();
  223.         if (selectionsArray.length == 0) {return '';}
  224.         for (var i=0; i<selectionsArray.length; i++) {
  225.             returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
  226.         }
  227.         return returnArray.join(this.delimiter);
  228.     },
  230.     /**
  231.      * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
  232.      * @param {String/Array} values The values to set
  233.      */
  234.     setValue: function(values) {
  235.         var index;
  236.         var selections = [];
  237.         this.view.clearSelections();
  238.         this.hiddenField.dom.value = '';
  240.         if (!values || (values == '')) { return; }
  242.         if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
  243.         for (var i=0; i<values.length; i++) {
  244.             index = this.view.store.indexOf(this.view.store.query(this.valueField,
  245.                 new RegExp('^' + values[i] + '$', "i")).itemAt(0));
  246.             selections.push(index);
  247.         }
  248.         this.view.select(selections);
  249.         this.hiddenField.dom.value = this.getValue();
  250.         this.validate();
  251.     },
  253.     // inherit docs
  254.     reset : function() {
  255.         this.setValue('');
  256.     },
  258.     // inherit docs
  259.     getRawValue: function(valueField) {
  260.         var tmp = this.getValue(valueField);
  261.         if (tmp.length) {
  262.             tmp = tmp.split(this.delimiter);
  263.         }
  264.         else {
  265.             tmp = [];
  266.         }
  267.         return tmp;
  268.     },
  270.     // inherit docs
  271.     setRawValue: function(values){
  272.         setValue(values);
  273.     },
  275.     // inherit docs
  276.     validateValue : function(value){
  277.         if (value.length < 1) { // if it has no value
  278.              if (this.allowBlank) {
  279.                  this.clearInvalid();
  280.                  return true;
  281.              } else {
  282.                  this.markInvalid(this.blankText);
  283.                  return false;
  284.              }
  285.         }
  286.         if (value.length < this.minSelections) {
  287.             this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
  288.             return false;
  289.         }
  290.         if (value.length > this.maxSelections) {
  291.             this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
  292.             return false;
  293.         }
  294.         return true;
  295.     },
  297.     // inherit docs
  298.     disable: function(){
  299.         this.disabled = true;
  300.         this.hiddenField.dom.disabled = true;
  301.         this.fs.disable();
  302.     },
  304.     // inherit docs
  305.     enable: function(){
  306.         this.disabled = false;
  307.         this.hiddenField.dom.disabled = false;
  308.         this.fs.enable();
  309.     },
  311.     // inherit docs
  312.     destroy: function(){
  313.         Ext.destroy(this.fs, this.dragZone, this.dropZone);
  314.         Ext.ux.form.MultiSelect.superclass.destroy.call(this);
  315.     }
  316. });
  319. Ext.reg('multiselect', Ext.ux.form.MultiSelect);
  321. //backwards compat
  322. Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
  325. Ext.ux.form.MultiSelect.DragZone = function(ms, config){
  326.     this.ms = ms;
  327.     this.view = ms.view;
  328.     var ddGroup = config.ddGroup || 'MultiselectDD';
  329.     var dd;
  330.     if (Ext.isArray(ddGroup)){
  331.         dd = ddGroup.shift();
  332.     } else {
  333.         dd = ddGroup;
  334.         ddGroup = null;
  335.     }
  336.     Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
  337.     this.setDraggable(ddGroup);
  338. };
  340. Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
  341.     onInitDrag : function(x, y){
  342.         var el = Ext.get(this.dragData.ddel.cloneNode(true));
  343.         this.proxy.update(el.dom);
  344.         el.setWidth(el.child('em').getWidth());
  345.         this.onStartDrag(x, y);
  346.         return true;
  347.     },
  348.     
  349.     // private
  350.     collectSelection: function(data) {
  351.         data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
  352.         var i = 0;
  353.         this.view.store.each(function(rec){
  354.             if (this.view.isSelected(i)) {
  355.                 var n = this.view.getNode(i);
  356.                 var dragNode = n.cloneNode(true);
  357.                 dragNode.id = Ext.id();
  358.                 data.ddel.appendChild(dragNode);
  359.                 data.records.push(this.view.store.getAt(i));
  360.                 data.viewNodes.push(n);
  361.             }
  362.             i++;
  363.         }, this);
  364.     },
  366.     // override
  367.     onEndDrag: function(data, e) {
  368.         var d = Ext.get(this.dragData.ddel);
  369.         if (d && d.hasClass("multi-proxy")) {
  370.             d.remove();
  371.         }
  372.     },
  374.     // override
  375.     getDragData: function(e){
  376.         var target = this.view.findItemFromChild(e.getTarget());
  377.         if(target) {
  378.             if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
  379.                 this.view.select(target);
  380.                 this.ms.setValue(this.ms.getValue());
  381.             }
  382.             if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
  383.             var dragData = {
  384.                 sourceView: this.view,
  385.                 viewNodes: [],
  386.                 records: []
  387.             };
  388.             if (this.view.getSelectionCount() == 1) {
  389.                 var i = this.view.getSelectedIndexes()[0];
  390.                 var n = this.view.getNode(i);
  391.                 dragData.viewNodes.push(dragData.ddel = n);
  392.                 dragData.records.push(this.view.store.getAt(i));
  393.                 dragData.repairXY = Ext.fly(n).getXY();
  394.             } else {
  395.                 dragData.ddel = document.createElement('div');
  396.                 dragData.ddel.className = 'multi-proxy';
  397.                 this.collectSelection(dragData);
  398.             }
  399.             return dragData;
  400.         }
  401.         return false;
  402.     },
  404.     // override the default repairXY.
  405.     getRepairXY : function(e){
  406.         return this.dragData.repairXY;
  407.     },
  409.     // private
  410.     setDraggable: function(ddGroup){
  411.         if (!ddGroup) return;
  412.         if (Ext.isArray(ddGroup)) {
  413.             Ext.each(ddGroup, this.setDraggable, this);
  414.             return;
  415.         }
  416.         this.addToGroup(ddGroup);
  417.     }
  418. });
  420. Ext.ux.form.MultiSelect.DropZone = function(ms, config){
  421.     this.ms = ms;
  422.     this.view = ms.view;
  423.     var ddGroup = config.ddGroup || 'MultiselectDD';
  424.     var dd;
  425.     if (Ext.isArray(ddGroup)){
  426.         dd = ddGroup.shift();
  427.     } else {
  428.         dd = ddGroup;
  429.         ddGroup = null;
  430.     }
  431.     Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
  432.     this.setDroppable(ddGroup);
  433. };
  435. Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
  436.     /**
  437.  * Part of the Ext.dd.DropZone interface. If no target node is found, the
  438.  * whole Element becomes the target, and this causes the drop gesture to append.
  439.  */
  440.     getTargetFromEvent : function(e) {
  441.         var target = e.getTarget();
  442.         return target;
  443.     },
  445.     // private
  446.     getDropPoint : function(e, n, dd){
  447.         if (n == this.ms.fs.body.dom) { return "below"; }
  448.         var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
  449.         var c = t + (b - t) / 2;
  450.         var y = Ext.lib.Event.getPageY(e);
  451.         if(y <= c) {
  452.             return "above";
  453.         }else{
  454.             return "below";
  455.         }
  456.     },
  458.     // private
  459.     isValidDropPoint: function(pt, n, data) {
  460.         if (!data.viewNodes || (data.viewNodes.length != 1)) {
  461.             return true;
  462.         }
  463.         var d = data.viewNodes[0];
  464.         if (d == n) {
  465.             return false;
  466.         }
  467.         if ((pt == "below") && (n.nextSibling == d)) {
  468.             return false;
  469.         }
  470.         if ((pt == "above") && (n.previousSibling == d)) {
  471.             return false;
  472.         }
  473.         return true;
  474.     },
  476.     // override
  477.     onNodeEnter : function(n, dd, e, data){
  478.         return false;
  479.     },
  481.     // override
  482.     onNodeOver : function(n, dd, e, data){
  483.         var dragElClass = this.dropNotAllowed;
  484.         var pt = this.getDropPoint(e, n, dd);
  485.         if (this.isValidDropPoint(pt, n, data)) {
  486.             if (this.ms.appendOnly) {
  487.                 return "x-tree-drop-ok-below";
  488.             }
  490.             // set the insert point style on the target node
  491.             if (pt) {
  492.                 var targetElClass;
  493.                 if (pt == "above"){
  494.                     dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
  495.                     targetElClass = "x-view-drag-insert-above";
  496.                 } else {
  497.                     dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
  498.                     targetElClass = "x-view-drag-insert-below";
  499.                 }
  500.                 if (this.lastInsertClass != targetElClass){
  501.                     Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
  502.                     this.lastInsertClass = targetElClass;
  503.                 }
  504.             }
  505.         }
  506.         return dragElClass;
  507.     },
  509.     // private
  510.     onNodeOut : function(n, dd, e, data){
  511.         this.removeDropIndicators(n);
  512.     },
  514.     // private
  515.     onNodeDrop : function(n, dd, e, data){
  516.         if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
  517.             return false;
  518.         }
  519.         var pt = this.getDropPoint(e, n, dd);
  520.         if (n != this.ms.fs.body.dom)
  521.             n = this.view.findItemFromChild(n);
  522.         var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
  523.         if (pt == "below") {
  524.             insertAt++;
  525.         }
  527.         var dir = false;
  529.         // Validate if dragging within the same MultiSelect
  530.         if (data.sourceView == this.view) {
  531.             // If the first element to be inserted below is the target node, remove it
  532.             if (pt == "below") {
  533.                 if (data.viewNodes[0] == n) {
  534.                     data.viewNodes.shift();
  535.                 }
  536.             } else {  // If the last element to be inserted above is the target node, remove it
  537.                 if (data.viewNodes[data.viewNodes.length - 1] == n) {
  538.                     data.viewNodes.pop();
  539.                 }
  540.             }
  542.             // Nothing to drop...
  543.             if (!data.viewNodes.length) {
  544.                 return false;
  545.             }
  547.             // If we are moving DOWN, then because a store.remove() takes place first,
  548.             // the insertAt must be decremented.
  549.             if (insertAt > this.view.store.indexOf(data.records[0])) {
  550.                 dir = 'down';
  551.                 insertAt--;
  552.             }
  553.         }
  555.         for (var i = 0; i < data.records.length; i++) {
  556.             var r = data.records[i];
  557.             if (data.sourceView) {
  558.                 data.sourceView.store.remove(r);
  559.             }
  560.             this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
  561.             var si = this.view.store.sortInfo;
  562.             if(si){
  563.                 this.view.store.sort(si.field, si.direction);
  564.             }
  565.         }
  566.         return true;
  567.     },
  569.     // private
  570.     removeDropIndicators : function(n){
  571.         if(n){
  572.             Ext.fly(n).removeClass([
  573.                 "x-view-drag-insert-above",
  574.                 "x-view-drag-insert-left",
  575.                 "x-view-drag-insert-right",
  576.                 "x-view-drag-insert-below"]);
  577.             this.lastInsertClass = "_noclass";
  578.         }
  579.     },
  581.     // private
  582.     setDroppable: function(ddGroup){
  583.         if (!ddGroup) return;
  584.         if (Ext.isArray(ddGroup)) {
  585.             Ext.each(ddGroup, this.setDroppable, this);
  586.             return;
  587.         }
  588.         this.addToGroup(ddGroup);
  589.     }
  590. });