EXTJS tree

/**
 * 树形UI综合示例(下拉树)
 * 
 * @author XiongChun
 * @since 2010-10-28
 */
Ext.onReady(function() {
			/*var addRoot = new Ext.tree.AsyncTreeNode({
						text : '部门树',
						expanded : true,
						id : '001'
					});*/
			/*var addDeptTree = new Ext.tree.TreePanel({
						loader : new Ext.tree.TreeLoader({
									baseAttrs : {},
									dataUrl : 'treeDemo.ered?reqCode=departmentTreeInit'
								}),
						//root : addRoot,
						autoScroll : true,
						animate : false,
						useArrows : false,
						border : false
					});*/
			var cataglogStore =  Ext.create('Ext.data.TreeStore', {
		    	fields:['id','text', 'leaf', 'cls'],
		        proxy: {
		            type: 'ajax',
		            async: false,
		            url: getRootPath() + '/jwctree.do?method=loadWFTreeMsg'
		        },
		      
		        reader: {
					type: 'json',
					root: 'trees'
				},
		        folderSort: true,
		        sorters: [{
		            property: 'text',
		            direction: 'ASC'
		        }]
		    });
			
			var tree = null;
			tree = Ext.create('Ext.tree.Panel', {
			    store: cataglogStore,
			    rootVisible:false,
			    height: 300,
			    width: 300,
			    title: '作业流结构',
			    useArrows: true,
			    dockedItems: [{
			        xtype: 'toolbar',
			        items: [{
			            text: '全部展开',
			            handler: function(){
			                tree.expandAll();
			            }
			        }, {
			            text: '全部折叠',
			            handler: function(){
			                tree.collapseAll();
			            }
			        }]
			    }],
			    buttons:[{
		       	 text: '确定',
		         handler: function(){
		             msgWin.close();
		         }
		    }],
				listeners: {
					'checkchange': function(node, checked) {/*
						var checkedRecord = tree.getView().getChecked();
						if(checkedRecord && checkedRecord.length > 1){
							for(var i=0; i<checkedRecord.length; i++){
								if(node.get('id') != checkedRecord[i].get('id')){
									checkedRecord[i].set('checked', false);
								}
							}
						}
					*/}
				}
			});
			
			/*// 监听下拉树的节点单击事件
			addDeptTree.on('click', function(node) {
						comboxWithTree.setValue(node.text);
						Ext.getCmp("firstForm").findById('parentid').setValue(node.attributes.id);
						comboxWithTree.collapse();
					});*/
		/*	var comboxWithTree = new Ext.form.ComboBox({
						id : 'parentdeptname',
						store : new Ext.data.ArrayStore({
									fields : [],
									data : [[]]
								}),
						editable : false,
						value : ' ',
						emptyText : '请选择...',
						fieldLabel : '上级部门',
						anchor : '100%',
						mode : 'remote',
						triggerAction : 'all',
						maxHeight : 390,
						// 下拉框的显示模板,addDeptTreeDiv作为显示下拉树的容器
						//tpl : "<tpl for='.'><div style='height:390px'><div id='addDeptTreeDiv'></div></div></tpl>",
						tpl: "<div id='addDeptTreeDiv'>Hello </div>",
						allowBlank : false,
						onSelect : Ext.emptyFn
					});*/
			//tree.render('addDeptTreeDiv');
			// 监听下拉框的下拉展开事件
		/*	comboxWithTree.on('expand', function() {
						// 将UI树挂到treeDiv容器
				alert(Ext.get('addDeptTreeDiv'));
				if(Ext.get('addDeptTreeDiv') != null){
					tree.render('addDeptTreeDiv');
				}
					//tree.render('addDeptTreeDiv');
						// addDeptTree.root.expand(); //只是第一次下拉会加载数据
						//addDeptTree.root.reload(); // 每次下拉都会加载数据

					});*/
			
			
			var tpl_t= Ext.create('Ext.Template', 
                   "<div id='addDeptTreeDiv'>Hello </div>"
                );
			
			var combo = new Ext.form.field.ComboBox({
			    renderTo: document.body,
			    queryMode: 'local',
			    store: new Ext.data.ArrayStore({
			        id: 0,
			        fields: [
			            'myId',  // numeric value is the key
			            'displayText'
			        ],
			        data: [[1, 'item1'], [2, 'item2']]  // data is local
			    }),
			    valueField: 'myId',
			    displayField: 'displayText',
			    triggerAction: 'all',
			   // tpl: tpl_t
			 tpl: "<div id='addDeptTreeDiv' style='height:390px'></div>"
			});
			
			combo.on('expand', function() {
					Ext.defer(function(){  
						tree.render('addDeptTreeDiv');
                    },300,this); 
				// 将UI树挂到treeDiv容器
				//tree.render(this.el);
		//	tree.render(addDeptTreeDiv);
			//	tree.show();
				/*	if(Ext.get('addDeptTreeDiv') != null){
						tree.render('addDeptTreeDiv');
					}*/
			//tree.render('addDeptTreeDiv');
				// addDeptTree.root.expand(); //只是第一次下拉会加载数据
				//addDeptTree.root.reload(); // 每次下拉都会加载数据

			});
			

		/*	var firstForm = new Ext.form.FormPanel({
						id : 'firstForm',
						name : 'firstForm',
						labelWidth : 60, // 标签宽度
						// frame : true, // 是否渲染表单面板背景色
						defaultType : 'textfield', // 表单元素默认类型
						labelAlign : 'right', // 标签对齐方式
						bodyStyle : 'padding:5 5 5 5', // 表单元素和表单面板的边距
						items : [{
									id : 'parentid',
									name : 'parentid',
									fieldLabel : '部门编号',
									readOnly : true,
									anchor : '100%'
								}, comboxWithTree]
					});

			var firstWindow = new Ext.Window({
						title : '<span class="commoncss">标准范例五(下拉树)</span>', // 窗口标题
						layout : 'fit', // 设置窗口布局模式
						width : 350, // 窗口宽度
						height : 160, // 窗口高度
						closable : false, // 是否可关闭
						collapsible : true, // 是否可收缩
						maximizable : true, // 设置是否可以最大化
						border : false, // 边框线设置
						constrain : true, // 设置窗口是否可以溢出父容器
						pageY : 20, // 页面定位X坐标
						pageX : document.body.clientWidth / 2 - 350 / 2, // 页面定位Y坐标
						items : [firstForm]
					});
			firstWindow.show(); // 显示窗口*/
		});