1 
  2 Appcelerator.Widget.AppExtTree =
  3 {
  4     getName: function()
  5     {
  6         return 'appcelerator exttree';
  7     },
  8     getDescription: function()
  9     {
 10         return 'ExtJS Tree made into an Appcelerator Widget';
 11     },
 12     getVersion: function()
 13     {
 14         return 1.2;
 15     },
 16     getSpecVersion: function()
 17     {
 18         return 1.0;
 19     },
 20     getAuthor: function()
 21     {
 22         return 'Nolan Wright';
 23     },
 24     getModuleURL: function ()
 25     {
 26         return 'http://www.appcelerator.org';
 27     },
 28     isWidget: function ()
 29     {
 30         return true;
 31     },
 32     getWidgetName: function()
 33     {
 34         return 'app:ext_tree';
 35     },
 36 
 37 	getActions: function()
 38 	{
 39 		return ['execute','senddata', 'select', 'select_no_fire'];
 40 	},	
 41 
 42     getAttributes: function()
 43     {
 44 	    var T = Appcelerator.Types;
 45         return [{name: 'on', optional: false, description: "on expression for tree", type: T.onExpr},
 46 				{name: 'draggable', optional: true, defaultValue:false, description: "are tree items draggable", type: T.bool},
 47 				{name: 'droppable', optional: true, defaultValue:false, description: "can items be dropped into tree", type: T.bool},
 48 				{name: 'property', optional: false,  description: "array property for tree data", type: T.identifier},
 49 				{name: 'rootText', optional: true, defaultValue:'Root', description: "name of root node"},
 50 				{name: 'rootId', optional: true, defaultValue:'root_id', description: "id of root node"},
 51 				{name: 'selectMessage', optional: true,  description: "message to send when node is selected", type: T.messageSend},
 52 				{name: 'width', optional: true,  description: "width of tree panel"},
 53 				{name: 'sendDataMessage', optional: true,  description: "Message name that contains tree data in its payload", type: T.messageSend},
 54 				{name: 'sendDataProperty', optional: true,  description: "property name for tree array data in its payload", type: T.identifer},
 55 				{name: 'height', optional: true,  description: "height of tree panel"},
 56                 {name: 'lines', optional: true, description: "show tree lines", defaultValue: true, type: T.bool}
 57 
 58 		];
 59     },
 60 	treeToJSON: function(params)
 61 	{
 62 		var nodes = params['root'].childNodes;
 63 		var tree = params['tree'];
 64 		var array = [{id:params['rootId'],parent:null}];
 65 		for(var i=0;i< nodes.length;i++)
 66 		{
 67 			array.push({id:nodes[i].id,parent:params['rootId'], order:i});
 68 			Appcelerator.Module.ExtTree.processChildren(nodes[i],array);
 69 		}
 70 	 	return array;
 71 	},
 72 	processChildren: function(node,array)
 73 	{
 74 		var child=node.childNodes;
 75 		for(var i=0;i<child.length;i++)
 76 		{
 77 			array.push({id:child[i].id,parent:node.id,order:i});
 78 		    Appcelerator.Module.ExtTree.processChildren(child[i],array);
 79 		}	
 80 	},
 81 	
 82 	senddata: function(id,params,data,scope)
 83 	{
 84 		var json=Appcelerator.Module.ExtTree.treeToJSON(params);
 85 		var property = params['sendDataProperty'];
 86 		if (params['sendDataMessage'])
 87 		{
 88 			$MQ(params['sendDataMessage'], {'rows':json});
 89 		}
 90 	},
 91 	select: function(id,params,data,scope) 
 92 	{
 93 	    var tree = params['tree'];
 94 	    var treeNode = tree.getNodeById(data.id);
 95 		if(treeNode) {
 96 		    var nodePath = treeNode.getPath();
 97 		    tree.selectPath(nodePath);
 98 		    tree.expandPath(nodePath);
 99 		}
100 	},
101 	select_no_fire: function(id,params,data,scope) 
102 	{
103         var tree = params['tree'];
104 	    if (params['selectMessage'])
105 		{
106 			tree.getSelectionModel().purgeListeners();
107 		}
108         Appcelerator.Widget.AppExtTree.select(id, params,data,scope);
109         if (params['selectMessage'])
110 		{
111 			tree.getSelectionModel().on('selectionchange', params['select_function']);
112 		}
113 	},
114 	execute: function(id,params,data,scope)
115 	{
116 		// reload data only if exists
117 		if (params['root'])
118 		{
119 			var count = (params['root'].childNodes.length -1)
120 			for(var i=count;i>=0; i--) 
121 			{
122 		        params['root'].removeChild(params['root'].childNodes[i]);
123 		    }
124 			for(var i = 0; i< data[params['property']].length; i++) 
125 			{
126 		        params['root'].appendChild(params['tree'].getLoader().createNode(data[params['property']][i]));
127 		    }
128 			params['root'].expand();
129 			return;
130 		}
131 		// otherwise build tree
132 		var Tree = Ext.tree;
133 		// set the root node
134 		var root = new Tree.AsyncTreeNode({
135             text: params['rootText'],
136             draggable:false,
137             children:data[params['property']],
138             id:params['root_id']
139 		});
140 
141 		var treeOptions = {};
142 		treeOptions['renderTo'] = params['id'];
143 		treeOptions['root'] = root;
144 		treeOptions['enableDD'] = (params['draggable'] == "true")?true:false;
145 		treeOptions['animate'] = true;
146 		treeOptions['lines'] = (params['lines'] == true || params['lines'] == 'true') ? true : false;
147 		treeOptions['selModel'] = new Ext.tree.DefaultSelectionModel();
148 		treeOptions['containerScroll'] = true;
149 
150 		treeOptions['loader'] = new Tree.TreeLoader();
151 
152 		if (params['width'])
153 		{
154 			treeOptions['width'] = params['width'];
155 		}
156 		if (params['height'])
157 		{
158 			treeOptions['height'] = params['height'];
159 		}
160 
161 		if (params['droppable'] == "true")
162 		{
163 			 treeOptions['dropConfig'] = {allowParentInsert:true,allowContainerDrop:true};
164 		}
165 		else
166 		{
167 			 treeOptions['dropConfig'] = {allowContainerDrop:false};
168 		}
169 		var tree = new Tree.TreePanel(treeOptions);
170 
171 		tree.render();
172 		root.expand();
173 		
174 		if (params['selectMessage'])
175 		{
176 		    params['select_function'] = function(tree,node) 
177 			{
178 				$MQ(params['selectMessage'],{'id':node.id,'text':node.text});
179 			};
180 			
181 			tree.getSelectionModel().on('selectionchange', params['select_function']);
182 			
183 		}
184 		params['tree'] = tree;
185 		params['root'] = root;
186 	},
187 
188 
189     buildWidget: function(element,parameters)
190     {
191 		var id = Appcelerator.Compiler.generateId();
192 		var html = "<div id='"+ id+ "'></div>";
193 		parameters['id'] = id;
194 		return {
195 			'presentation' :html ,
196 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
197 			'parameters': parameters,
198 			'wire' : true,
199 			'compile':false
200 		};
201     }
202 };
203 Appcelerator.Widget.loadWidgetCommonCSS("app:ext_tree","extjs/xtheme-gray.css");
204 Appcelerator.Widget.loadWidgetCommonCSS("app:ext_tree","extjs/ext-all.css");
205 Appcelerator.Widget.registerWidgetWithCommonJS('app:ext_tree',Appcelerator.Widget.AppExtTree,["extjs/ext-base.js","extjs/ext-all.js"]);