1 /** 2 * @author Gillis Haasnoot <gillis.haasnoot@gmail.com> 3 * @package Banana.Controls 4 * @summary Multi select 5 */ 6 7 goog.provide('Banana.Controls.DataControls.ListControls.MultiSelect'); 8 9 goog.require('Banana.Controls.DataControls.ListControls.DropDown'); 10 11 /** @namespace Banana.Controls.MultiSelect */ 12 namespace('Banana.Controls').MultiSelect = Banana.Controls.DropDown.extend( 13 /** @lends Banana.Controls.MultiSelect.prototype */ 14 { 15 16 /** 17 * Creates a Multiselect. 18 * 19 * Example: 20 21 var multiselect = new Banana.Controls.MultiSelect(); 22 23 this.addControl(multiselect); 24 25 multiselect.setDataSource([1,2,3,4,5,6,7,8,9]); 26 multiselect.setData([5,6,2]); 27 28 ///another way top populate datasource is with complex objects. 29 //by default complex objects should have a dataKeyField and dataValueField. 30 //where dataKeyField = key and dataValueField = value; 31 //To change this use setDataKeyField and setDataValueField. 32 33 multiselect.setDataSource([{key:1,value:'one'},{key:2,value:'two'}]); 34 multiselect.setData([2,4,6]); 35 36 * @constructs 37 * @extends Banana.Controls.DropDown 38 */ 39 init : function() 40 { 41 this._super(); 42 43 this.addCssClass('BMultiSelect'); 44 45 this.optGroupField = "group"; 46 47 this.bind('change',this.getProxy(function(e) 48 { 49 this.setData(Banana.Util.DomHelper.getData(this) || []); 50 this.isChanged = true; 51 this.triggerEvent('selectionChanged'); 52 })); 53 54 // Prevent propagation of event, because parent controls, e.g. 55 // a datagrid row, can capture this event in Chrome and prevent 56 // it from functioning. 57 this.bind('mousedown', function(e) { 58 e.stopPropagation(); 59 }); 60 }, 61 62 /** 63 * @override to enable multiselect 64 * @ignore 65 */ 66 getAttributes : function() 67 { 68 var attr = this._super(); 69 attr['multiple'] = 'multiple'; 70 return attr; 71 } 72 });