+++ /dev/null
-/*\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
-/*\r
- * Note that this control should still be treated as an example and that the API will most likely\r
- * change once it is ported into the Ext core as a standard form control. This is still planned\r
- * for a future release, so this should not yet be treated as a final, stable API at this time.\r
- */\r
- \r
-/** \r
- * @class Ext.ux.MultiSelect\r
- * @extends Ext.form.Field\r
- * A control that allows selection and form submission of multiple list items. The MultiSelect control\r
- * depends on the Ext.ux.DDView class to provide drag/drop capability both within the list and also \r
- * between multiple MultiSelect controls (see the Ext.ux.ItemSelector).\r
- * \r
- * @history\r
- * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- * 2008-06-19 bpm Docs and demo code clean up\r
- * \r
- * @constructor\r
- * Create a new MultiSelect\r
- * @param {Object} config Configuration options\r
- */\r
-Ext.ux.Multiselect = Ext.extend(Ext.form.Field, {\r
- /**\r
- * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
- */\r
- /**\r
- * @cfg {Store} store The {@link Ext.data.Store} used by the underlying Ext.ux.DDView.\r
- */\r
- /**\r
- * @cfg {Ext.ux.DDView} view The Ext.ux.DDView used to render the multiselect list.\r
- */\r
- /**\r
- * @cfg {String/Array} dragGroup The ddgroup name(s) for the DDView's DragZone (defaults to undefined). \r
- */ \r
- /**\r
- * @cfg {String/Array} dropGroup The ddgroup name(s) for the DDView's DropZone (defaults to undefined). \r
- */ \r
- /**\r
- * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a \r
- * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
- */\r
- /**\r
- * @cfg {String} fieldName The name of the field to sort by when sorting is enabled.\r
- */\r
- /**\r
- * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled \r
- * (use for lists which are sorted, defaults to false).\r
- */\r
- appendOnly:false,\r
- /**\r
- * @cfg {Array} dataFields Inline data definition when not using a pre-initialised store. Known to cause problems \r
- * in some browswers for very long lists. Use store for large datasets.\r
- */\r
- dataFields:[],\r
- /**\r
- * @cfg {Array} data Inline data when not using a pre-initialised store. Known to cause problems in some \r
- * browswers for very long lists. Use store for large datasets.\r
- */\r
- data:[],\r
- /**\r
- * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
- */\r
- width:100,\r
- /**\r
- * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
- */\r
- height:100,\r
- /**\r
- * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
- */\r
- displayField:0,\r
- /**\r
- * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
- */\r
- valueField:1,\r
- /**\r
- * @cfg {Boolean} allowBlank True to require at least one item in the list to be selected, false to allow no \r
- * selection (defaults to true).\r
- */\r
- allowBlank:true,\r
- /**\r
- * @cfg {Number} minLength Minimum number of selections allowed (defaults to 0).\r
- */\r
- minLength:0,\r
- /**\r
- * @cfg {Number} maxLength Maximum number of selections allowed (defaults to Number.MAX_VALUE). \r
- */\r
- maxLength:Number.MAX_VALUE,\r
- /**\r
- * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
- * {@link Ext.form.TextField#blankText}.\r
- */\r
- blankText:Ext.form.TextField.prototype.blankText,\r
- /**\r
- * @cfg {String} minLengthText Validation message displayed when {@link #minLength} is not met (defaults to 'Minimum {0} \r
- * item(s) required'). The {0} token will be replaced by the value of {@link #minLength}.\r
- */\r
- minLengthText:'Minimum {0} item(s) required',\r
- /**\r
- * @cfg {String} maxLengthText Validation message displayed when {@link #maxLength} is not met (defaults to 'Maximum {0} \r
- * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxLength}.\r
- */\r
- maxLengthText:'Maximum {0} item(s) allowed',\r
- /**\r
- * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
- * (defaults to ',').\r
- */\r
- delimiter:',',\r
- \r
- // DDView settings\r
- copy:false,\r
- allowDup:false,\r
- allowTrash:false,\r
- focusClass:undefined,\r
- sortDir:'ASC',\r
- \r
- // private\r
- defaultAutoCreate : {tag: "div"},\r
- \r
- // private\r
- initComponent: function(){\r
- Ext.ux.Multiselect.superclass.initComponent.call(this);\r
- this.addEvents({\r
- 'dblclick' : true,\r
- 'click' : true,\r
- 'change' : true,\r
- 'drop' : true\r
- }); \r
- },\r
- \r
- // private\r
- onRender: function(ct, position){\r
- Ext.ux.Multiselect.superclass.onRender.call(this, ct, position);\r
- \r
- var cls = 'ux-mselect';\r
- var fs = new Ext.form.FieldSet({\r
- renderTo:this.el,\r
- title:this.legend,\r
- height:this.height,\r
- width:this.width,\r
- style:"padding:0;",\r
- tbar:this.tbar\r
- });\r
- //if(!this.legend)fs.el.down('.'+fs.headerCls).remove();\r
- fs.body.addClass(cls);\r
-\r
- var tpl = '<tpl for="."><div class="' + cls + '-item';\r
- if(Ext.isIE || Ext.isIE7){\r
- tpl+='" unselectable=on';\r
- }else{\r
- tpl+=' x-unselectable"';\r
- }\r
- tpl+='>{' + this.displayField + '}</div></tpl>';\r
-\r
- if(!this.store){\r
- this.store = new Ext.data.SimpleStore({\r
- fields: this.dataFields,\r
- data : this.data\r
- });\r
- }\r
-\r
- this.view = new Ext.ux.DDView({\r
- multiSelect: true, \r
- store: this.store, \r
- selectedClass: cls+"-selected", \r
- tpl:tpl,\r
- allowDup:this.allowDup, \r
- copy: this.copy, \r
- allowTrash: this.allowTrash, \r
- dragGroup: this.dragGroup, \r
- dropGroup: this.dropGroup, \r
- itemSelector:"."+cls+"-item",\r
- isFormField:false, \r
- applyTo:fs.body,\r
- appendOnly:this.appendOnly,\r
- sortField:this.sortField, \r
- sortDir:this.sortDir\r
- });\r
-\r
- fs.add(this.view);\r
- \r
- this.view.on('click', this.onViewClick, this);\r
- this.view.on('beforeClick', this.onViewBeforeClick, this);\r
- this.view.on('dblclick', this.onViewDblClick, this);\r
- this.view.on('drop', function(ddView, n, dd, e, data){\r
- return this.fireEvent("drop", ddView, n, dd, e, data);\r
- }, this);\r
- \r
- this.hiddenName = this.name;\r
- var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};\r
- if (this.isFormField) { \r
- this.hiddenField = this.el.createChild(hiddenTag);\r
- } else {\r
- this.hiddenField = Ext.get(document.body).createChild(hiddenTag);\r
- }\r
- fs.doLayout();\r
- },\r
- \r
- // private\r
- initValue:Ext.emptyFn,\r
- \r
- // private\r
- onViewClick: function(vw, index, node, e) {\r
- var arrayIndex = this.preClickSelections.indexOf(index);\r
- if (arrayIndex != -1)\r
- {\r
- this.preClickSelections.splice(arrayIndex, 1);\r
- this.view.clearSelections(true);\r
- this.view.select(this.preClickSelections);\r
- }\r
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
- this.hiddenField.dom.value = this.getValue();\r
- this.fireEvent('click', this, e);\r
- this.validate(); \r
- },\r
-\r
- // private\r
- onViewBeforeClick: function(vw, index, node, e) {\r
- this.preClickSelections = this.view.getSelectedIndexes();\r
- if (this.disabled) {return false;}\r
- },\r
-\r
- // private\r
- onViewDblClick : function(vw, index, node, e) {\r
- return this.fireEvent('dblclick', vw, index, node, e);\r
- }, \r
- \r
- /**\r
- * Returns an array of data values for the selected items in the list. The values will be separated\r
- * by {@link #delimiter}.\r
- * @return {Array} value An array of string data values\r
- */\r
- getValue: function(valueField){\r
- var returnArray = [];\r
- var selectionsArray = this.view.getSelectedIndexes();\r
- if (selectionsArray.length == 0) {return '';}\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- returnArray.push(this.store.getAt(selectionsArray[i]).get(((valueField != null)? valueField : this.valueField)));\r
- }\r
- return returnArray.join(this.delimiter);\r
- },\r
-\r
- /**\r
- * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
- * @param {String/Array} values The values to set\r
- */\r
- setValue: function(values) {\r
- var index;\r
- var selections = [];\r
- this.view.clearSelections();\r
- this.hiddenField.dom.value = '';\r
- \r
- if (!values || (values == '')) { return; }\r
- \r
- if (!(values instanceof Array)) { values = values.split(this.delimiter); }\r
- for (var i=0; i<values.length; i++) {\r
- index = this.view.store.indexOf(this.view.store.query(this.valueField, \r
- new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
- selections.push(index);\r
- }\r
- this.view.select(selections);\r
- this.hiddenField.dom.value = this.getValue();\r
- this.validate();\r
- },\r
- \r
- // inherit docs\r
- reset : function() {\r
- this.setValue('');\r
- },\r
- \r
- // inherit docs\r
- getRawValue: function(valueField) {\r
- var tmp = this.getValue(valueField);\r
- if (tmp.length) {\r
- tmp = tmp.split(this.delimiter);\r
- }\r
- else{\r
- tmp = [];\r
- }\r
- return tmp;\r
- },\r
-\r
- // inherit docs\r
- setRawValue: function(values){\r
- setValue(values);\r
- },\r
-\r
- // inherit docs\r
- validateValue : function(value){\r
- if (value.length < 1) { // if it has no value\r
- if (this.allowBlank) {\r
- this.clearInvalid();\r
- return true;\r
- } else {\r
- this.markInvalid(this.blankText);\r
- return false;\r
- }\r
- }\r
- if (value.length < this.minLength) {\r
- this.markInvalid(String.format(this.minLengthText, this.minLength));\r
- return false;\r
- }\r
- if (value.length > this.maxLength) {\r
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));\r
- return false;\r
- }\r
- return true;\r
- }\r
-});\r
-\r
-Ext.reg("multiselect", Ext.ux.Multiselect);\r
git.ithinksw.org / extjs.git / blobdiff