3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.ns('Ext.ux.form');
\r
10 * @class Ext.ux.form.MultiSelect
\r
11 * @extends Ext.form.Field
\r
12 * A control that allows selection and form submission of multiple list items.
\r
15 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
\r
16 * 2008-06-19 bpm Docs and demo code clean up
\r
19 * Create a new MultiSelect
\r
20 * @param {Object} config Configuration options
\r
21 * @xtype multiselect
\r
23 Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
\r
25 * @cfg {String} legend Wraps the object with a fieldset and specified legend.
\r
28 * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
\r
31 * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
\r
34 * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
\r
37 * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
\r
41 * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
\r
42 * toolbar config, or an array of buttons/button configs to be added to the toolbar.
\r
45 * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
\r
46 * (use for lists which are sorted, defaults to false).
\r
50 * @cfg {Number} width Width in pixels of the control (defaults to 100).
\r
54 * @cfg {Number} height Height in pixels of the control (defaults to 100).
\r
58 * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
\r
62 * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
\r
66 * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
\r
67 * selection (defaults to true).
\r
71 * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
\r
75 * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
\r
77 maxSelections:Number.MAX_VALUE,
\r
79 * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
\r
80 * {@link Ext.form.TextField#blankText}.
\r
82 blankText:Ext.form.TextField.prototype.blankText,
\r
84 * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
\r
85 * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.
\r
87 minSelectionsText:'Minimum {0} item(s) required',
\r
89 * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
\r
90 * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.
\r
92 maxSelectionsText:'Maximum {0} item(s) allowed',
\r
94 * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
\r
95 * (defaults to ',').
\r
99 * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
\r
100 * Acceptable values for this property are:
\r
101 * <div class="mdetail-params"><ul>
\r
102 * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
\r
103 * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
\r
104 * <div class="mdetail-params"><ul>
\r
105 * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
\r
106 * A 1-dimensional array will automatically be expanded (each array item will be the combo
\r
107 * {@link #valueField value} and {@link #displayField text})</div></li>
\r
108 * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
\r
109 * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
\r
110 * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
\r
111 * </div></li></ul></div></li></ul></div>
\r
115 defaultAutoCreate : {tag: "div"},
\r
118 initComponent: function(){
\r
119 Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
\r
121 if(Ext.isArray(this.store)){
\r
122 if (Ext.isArray(this.store[0])){
\r
123 this.store = new Ext.data.ArrayStore({
\r
124 fields: ['value','text'],
\r
127 this.valueField = 'value';
\r
129 this.store = new Ext.data.ArrayStore({
\r
134 this.valueField = 'text';
\r
136 this.displayField = 'text';
\r
138 this.store = Ext.StoreMgr.lookup(this.store);
\r
150 onRender: function(ct, position){
\r
151 Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
\r
153 var fs = this.fs = new Ext.form.FieldSet({
\r
155 title: this.legend,
\r
156 height: this.height,
\r
158 style: "padding:0;",
\r
161 fs.body.addClass('ux-mselect');
\r
163 this.view = new Ext.ListView({
\r
166 columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
\r
172 this.view.on('click', this.onViewClick, this);
\r
173 this.view.on('beforeclick', this.onViewBeforeClick, this);
\r
174 this.view.on('dblclick', this.onViewDblClick, this);
\r
176 this.hiddenName = this.name || Ext.id();
\r
177 var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
\r
178 this.hiddenField = this.el.createChild(hiddenTag);
\r
179 this.hiddenField.dom.disabled = this.hiddenName != this.name;
\r
184 afterRender: function(){
\r
185 Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
\r
187 if (this.ddReorder && !this.dragGroup && !this.dropGroup){
\r
188 this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
\r
191 if (this.draggable || this.dragGroup){
\r
192 this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
\r
193 ddGroup: this.dragGroup
\r
196 if (this.droppable || this.dropGroup){
\r
197 this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
\r
198 ddGroup: this.dropGroup
\r
204 onViewClick: function(vw, index, node, e) {
\r
205 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
\r
206 this.hiddenField.dom.value = this.getValue();
\r
207 this.fireEvent('click', this, e);
\r
212 onViewBeforeClick: function(vw, index, node, e) {
\r
213 if (this.disabled) {return false;}
\r
217 onViewDblClick : function(vw, index, node, e) {
\r
218 return this.fireEvent('dblclick', vw, index, node, e);
\r
222 * Returns an array of data values for the selected items in the list. The values will be separated
\r
223 * by {@link #delimiter}.
\r
224 * @return {Array} value An array of string data values
\r
226 getValue: function(valueField){
\r
227 var returnArray = [];
\r
228 var selectionsArray = this.view.getSelectedIndexes();
\r
229 if (selectionsArray.length == 0) {return '';}
\r
230 for (var i=0; i<selectionsArray.length; i++) {
\r
231 returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
\r
233 return returnArray.join(this.delimiter);
\r
237 * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
\r
238 * @param {String/Array} values The values to set
\r
240 setValue: function(values) {
\r
242 var selections = [];
\r
243 this.view.clearSelections();
\r
244 this.hiddenField.dom.value = '';
\r
246 if (!values || (values == '')) { return; }
\r
248 if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
\r
249 for (var i=0; i<values.length; i++) {
\r
250 index = this.view.store.indexOf(this.view.store.query(this.valueField,
\r
251 new RegExp('^' + values[i] + '$', "i")).itemAt(0));
\r
252 selections.push(index);
\r
254 this.view.select(selections);
\r
255 this.hiddenField.dom.value = this.getValue();
\r
260 reset : function() {
\r
265 getRawValue: function(valueField) {
\r
266 var tmp = this.getValue(valueField);
\r
268 tmp = tmp.split(this.delimiter);
\r
277 setRawValue: function(values){
\r
282 validateValue : function(value){
\r
283 if (value.length < 1) { // if it has no value
\r
284 if (this.allowBlank) {
\r
285 this.clearInvalid();
\r
288 this.markInvalid(this.blankText);
\r
292 if (value.length < this.minSelections) {
\r
293 this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
\r
296 if (value.length > this.maxSelections) {
\r
297 this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
\r
304 disable: function(){
\r
305 this.disabled = true;
\r
306 this.hiddenField.dom.disabled = true;
\r
311 enable: function(){
\r
312 this.disabled = false;
\r
313 this.hiddenField.dom.disabled = false;
\r
318 destroy: function(){
\r
319 Ext.destroy(this.fs, this.dragZone, this.dropZone);
\r
320 Ext.ux.form.MultiSelect.superclass.destroy.call(this);
\r
325 Ext.reg('multiselect', Ext.ux.form.MultiSelect);
\r
328 Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
\r
331 Ext.ux.form.MultiSelect.DragZone = function(ms, config){
\r
333 this.view = ms.view;
\r
334 var ddGroup = config.ddGroup || 'MultiselectDD';
\r
336 if (Ext.isArray(ddGroup)){
\r
337 dd = ddGroup.shift();
\r
342 Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
\r
343 this.setDraggable(ddGroup);
\r
346 Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
\r
347 onInitDrag : function(x, y){
\r
348 var el = Ext.get(this.dragData.ddel.cloneNode(true));
\r
349 this.proxy.update(el.dom);
\r
350 el.setWidth(el.child('em').getWidth());
\r
351 this.onStartDrag(x, y);
\r
356 collectSelection: function(data) {
\r
357 data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
\r
359 this.view.store.each(function(rec){
\r
360 if (this.view.isSelected(i)) {
\r
361 var n = this.view.getNode(i);
\r
362 var dragNode = n.cloneNode(true);
\r
363 dragNode.id = Ext.id();
\r
364 data.ddel.appendChild(dragNode);
\r
365 data.records.push(this.view.store.getAt(i));
\r
366 data.viewNodes.push(n);
\r
373 onEndDrag: function(data, e) {
\r
374 var d = Ext.get(this.dragData.ddel);
\r
375 if (d && d.hasClass("multi-proxy")) {
\r
381 getDragData: function(e){
\r
382 var target = this.view.findItemFromChild(e.getTarget());
\r
384 if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
\r
385 this.view.select(target);
\r
386 this.ms.setValue(this.ms.getValue());
\r
388 if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
\r
390 sourceView: this.view,
\r
394 if (this.view.getSelectionCount() == 1) {
\r
395 var i = this.view.getSelectedIndexes()[0];
\r
396 var n = this.view.getNode(i);
\r
397 dragData.viewNodes.push(dragData.ddel = n);
\r
398 dragData.records.push(this.view.store.getAt(i));
\r
399 dragData.repairXY = Ext.fly(n).getXY();
\r
401 dragData.ddel = document.createElement('div');
\r
402 dragData.ddel.className = 'multi-proxy';
\r
403 this.collectSelection(dragData);
\r
410 // override the default repairXY.
\r
411 getRepairXY : function(e){
\r
412 return this.dragData.repairXY;
\r
416 setDraggable: function(ddGroup){
\r
417 if (!ddGroup) return;
\r
418 if (Ext.isArray(ddGroup)) {
\r
419 Ext.each(ddGroup, this.setDraggable, this);
\r
422 this.addToGroup(ddGroup);
\r
426 Ext.ux.form.MultiSelect.DropZone = function(ms, config){
\r
428 this.view = ms.view;
\r
429 var ddGroup = config.ddGroup || 'MultiselectDD';
\r
431 if (Ext.isArray(ddGroup)){
\r
432 dd = ddGroup.shift();
\r
437 Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
\r
438 this.setDroppable(ddGroup);
\r
441 Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
\r
443 * Part of the Ext.dd.DropZone interface. If no target node is found, the
\r
444 * whole Element becomes the target, and this causes the drop gesture to append.
\r
446 getTargetFromEvent : function(e) {
\r
447 var target = e.getTarget();
\r
452 getDropPoint : function(e, n, dd){
\r
453 if (n == this.ms.fs.body.dom) { return "below"; }
\r
454 var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
\r
455 var c = t + (b - t) / 2;
\r
456 var y = Ext.lib.Event.getPageY(e);
\r
465 isValidDropPoint: function(pt, n, data) {
\r
466 if (!data.viewNodes || (data.viewNodes.length != 1)) {
\r
469 var d = data.viewNodes[0];
\r
473 if ((pt == "below") && (n.nextSibling == d)) {
\r
476 if ((pt == "above") && (n.previousSibling == d)) {
\r
483 onNodeEnter : function(n, dd, e, data){
\r
488 onNodeOver : function(n, dd, e, data){
\r
489 var dragElClass = this.dropNotAllowed;
\r
490 var pt = this.getDropPoint(e, n, dd);
\r
491 if (this.isValidDropPoint(pt, n, data)) {
\r
492 if (this.ms.appendOnly) {
\r
493 return "x-tree-drop-ok-below";
\r
496 // set the insert point style on the target node
\r
499 if (pt == "above"){
\r
500 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
\r
501 targetElClass = "x-view-drag-insert-above";
\r
503 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
\r
504 targetElClass = "x-view-drag-insert-below";
\r
506 if (this.lastInsertClass != targetElClass){
\r
507 Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
\r
508 this.lastInsertClass = targetElClass;
\r
512 return dragElClass;
\r
516 onNodeOut : function(n, dd, e, data){
\r
517 this.removeDropIndicators(n);
\r
521 onNodeDrop : function(n, dd, e, data){
\r
522 if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
\r
525 var pt = this.getDropPoint(e, n, dd);
\r
526 if (n != this.ms.fs.body.dom)
\r
527 n = this.view.findItemFromChild(n);
\r
528 var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
\r
529 if (pt == "below") {
\r
535 // Validate if dragging within the same MultiSelect
\r
536 if (data.sourceView == this.view) {
\r
537 // If the first element to be inserted below is the target node, remove it
\r
538 if (pt == "below") {
\r
539 if (data.viewNodes[0] == n) {
\r
540 data.viewNodes.shift();
\r
542 } else { // If the last element to be inserted above is the target node, remove it
\r
543 if (data.viewNodes[data.viewNodes.length - 1] == n) {
\r
544 data.viewNodes.pop();
\r
548 // Nothing to drop...
\r
549 if (!data.viewNodes.length) {
\r
553 // If we are moving DOWN, then because a store.remove() takes place first,
\r
554 // the insertAt must be decremented.
\r
555 if (insertAt > this.view.store.indexOf(data.records[0])) {
\r
561 for (var i = 0; i < data.records.length; i++) {
\r
562 var r = data.records[i];
\r
563 if (data.sourceView) {
\r
564 data.sourceView.store.remove(r);
\r
566 this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
\r
567 var si = this.view.store.sortInfo;
\r
569 this.view.store.sort(si.field, si.direction);
\r
576 removeDropIndicators : function(n){
\r
578 Ext.fly(n).removeClass([
\r
579 "x-view-drag-insert-above",
\r
580 "x-view-drag-insert-left",
\r
581 "x-view-drag-insert-right",
\r
582 "x-view-drag-insert-below"]);
\r
583 this.lastInsertClass = "_noclass";
\r
588 setDroppable: function(ddGroup){
\r
589 if (!ddGroup) return;
\r
590 if (Ext.isArray(ddGroup)) {
\r
591 Ext.each(ddGroup, this.setDroppable, this);
\r
594 this.addToGroup(ddGroup);
\r