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