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 });