1 /**
  2  * @author Gillis Haasnoot <gillis.haasnoot@gmail.com>
  3  * @package Banana.Controls
  4  * @summary DataGridTreeDataItemRender
  5  */
  6 
  7 goog.provide('Banana.Controls.DataGridTreeDataItemRender');
  8 
  9 /** @namespace Banana.Controls.DataGridTreeDataItemRender */
 10 namespace('Banana.Controls').DataGridTreeDataItemRender = Banana.Controls.DataGridTreeItemRender.extend(
 11 /** @lends Banana.Controls.DataGridTreeDataItemRender.prototype */
 12 {
 13 	/**
 14 	 * Creates datagrid tree data item render.
 15 	 * Looks similar to a regular tree item render. except we added a checkbox inside the item render
 16 	 * This item render should be used inside Banana.Controls.DataGridDataTreeListRender
 17 	 *
 18 	 * example: 
 19     
 20 	        var list = new Banana.Controls.DataGrid()
 21 	       
 22 	        //create list render
 23 	  		var listRender = new Application.Controls.DataGridDataTreeListRender();
 24 			listRender.setChildProperty("children");
 25 			listRender.setItemIndexKey('id'); 
 26 			listRender.setDefaultOpen(true);
 27 			
 28 			listRender.bind('selectIndex',this.getProxy(function(e,index){		
 29 				listRender.selectAllFromIndex(index);		
 30 			}));
 31 			
 32 		    list.setDataSource(datasource); 
 33 			listRender.setData(data);
 34 			
 35 			listRender.bind('dataSourceChanged',this.getProxy(function(){
 36 				
 37 			}));
 38 			
 39 			listRender.bind('dataChanged',this.getProxy(function(){
 40 				var selectedKeys = listRender.getData();
 41 			}));
 42 	 *
 43 	 * @constructs
 44 	 * @extends Banana.Controls.DataGridTreeItemRender
 45 	 */
 46 	init : function()
 47 	{
 48 		this._super();
 49 	},
 50 	
 51 	/**
 52 	 * Overwrite this method to implement your own custom logic.
 53 	 * In this method you have access to this.data
 54 	 */
 55 	createComponents : function()
 56 	{
 57 		this.panel = new Banana.Controls.Panel();
 58 		
 59 		this.wrapper = new Banana.Controls.Panel()
 60 		.setStyle('position:relative;float:left;width:20px;heigth:20px;display:inline-block;');		
 61 		
 62 		this.clickable = new Banana.Controls.Panel()
 63 		.setStyle('z-index:12;width:20px; height:20px;position:absolute;top:0;');
 64 		
 65 		this.cb = new Banana.Controls.CheckBox().setStyle('z-index:1;position:absolute;top:0;');
 66 		this.wrapper.addControl('<div style="clear:both;height:20px;width:20px;"></div>');
 67 		
 68 		this.clickable.bind('click',this.getProxy(function(){
 69 			if (this.isChecked())
 70 			{
 71 				this.setChecked(false);
 72 				this.triggerEvent('userUnchecked');
 73 			}
 74 			else
 75 			{
 76 			
 77 				this.setChecked(true);
 78 				this.triggerEvent('userChecked');
 79 			}
 80 		}));
 81 		
 82 		this.wrapper.addControl(this.cb);
 83 		this.wrapper.addControl(this.clickable);
 84 			
 85 		this.label = new Banana.Controls.Label().setStyle('float:left;');
 86 		
 87 		this.panel.addControl(this.wrapper);
 88 		this.panel.addControl(this.label);
 89 		
 90 		this.addControl(this.panel);
 91 	},
 92 	
 93 	/**
 94 	 * By default we extract data.name to show in the item render.
 95 	 * 
 96 	 * overwrite to implement your own logic
 97 	 */
 98 	updateDisplay : function()
 99 	{
100 		if (this.data && this.data.name)
101 		{
102 			this.label.setData(this.data.name);
103 		}
104 	},
105 		
106 	/**
107 	 * this method is automaticaly called by the listrender.
108 	 * @param {mixed} data
109 	 * @return {this} 
110 	 */
111 	setData : function(data)
112 	{
113 		this._super(data);
114 		return this;
115 	},
116 	
117 	/**
118 	 * @param {boolean} checked true to check the checkbox
119 	 * @param {boolean} ignoreEvent when true we dont fire a change event
120 	 */
121 	setChecked : function(checked,ignoreEvent)
122 	{
123 		this.cb.setData(checked);
124 	},
125 	
126 	/**
127 	 * @return {boolean} true when checked
128 	 */
129 	isChecked : function()
130 	{
131 		return this.cb.getData();
132 	},
133 	
134 	/**
135 	 * @return {boolean} true when enabled
136 	 */
137 	isEnabled : function()
138 	{
139 		return this.enabled;
140 	},
141 
142 	/**
143 	 * @param {boolean} enabled
144 	 */
145 	setEnabled : function(enabled)
146 	{
147 		this.disabled = enabled;
148 		
149 		if (enabled)
150 		{
151 			this.cb.setEnabled(true);
152 			
153 			//bug in jquery ??? the set enabled doesnt work. it make use of the prop method which is not working here
154 			jQuery('#'+this.cb.clientId).attr('disabled',false);
155 			//this.clickable.setCss({'border':'1px solid green'});
156 		}
157 		else
158 		{
159 			this.cb.setEnabled(false);
160 			
161 			//bug in jquery ??? the set enabled doesnt work. it make use of the prop method which is not working here
162 			jQuery('#'+this.cb.clientId).attr('disabled','disabled');
163 			//this.clickable.setCss({'border':'1px solid red'});
164 		}
165 	},
166 	
167 	/**
168 	 * by default we return false here.
169 	 * @return {boolean} 
170 	 */
171 	isSelectable : function()
172 	{
173 		return false;
174 	}
175 });