js 部分 /** tree demo 1 异步树 组成: 1.节点 a.普通节点 b.根节点 c.默认属性 id text leaf children icon 2..树加载器 3.树容器 4.事件 5.渲染 **/ Ext.onReady(function() { var comboHidden = new Ext.form.Hidden({ name:'comboHidden', value:'' }); var comboxWithTree = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, mode: 'local', triggerAction:'all', maxHeight: 200, height:500, tpl: "<div id='tree'></div>", selectedClass:'', value:'', onSelect:Ext.emptyFn }); comboxWithTree.render('comboxWithTree'); var opRoot = new Ext.tree.AsyncTreeNode({ id:'1', text:'root' }); //与后台通讯的加载器 var loader = new Ext.tree.TreeLoader({ dataUrl: 'exttree.php', baseParams:{ method:'getTree', pId:'' } }); //树容器 var opTree = new Ext.tree.TreePanel({ anchor : '95%', frame : false, width : 200, height : 400, animate : false, rootVisible : true, autoScroll : true, loader : loader, //之前定义的加载器 root : opRoot //之前定义的根节点 }); //加载之前所触发的事件 opTree.loader.on("beforeload", function(treeLoader, node) { loader.baseParams.pId = node.attributes.id; }); //树节点点击事件 opTree.on('click',function(node,event) { if(node.isLeaf()){ event.stopEvent(); comboxWithTree.setValue(node.attributes.text); comboHidden.setValue(node.attributes.id); comboxWithTree.collapse(); Ext.Msg.show({ title : '提示', msg : "你单击了:<br /> node -- " + node + "<br /> node.attributes.target -- " + node.attributes.target + "<br /> comboHidden.getValue() -- " + comboHidden.getValue(), animEl: node.ui.textNode }); } else { event.stopEvent(); node.toggle(); //点击时展开或关闭子节点 } }); comboxWithTree.on('expand',function(){ opTree.render('tree'); opTree.root.reload(); }); }); html 部分 <div id='comboxWithTree'></div> php 部分,这里省略数据库交互过程,通过数组模拟后台数据 #################################exttree.php: $Record = array( array("ID" => "5", "NAME" => "A02", "TARGET" => "类别") ,array("ID" => "11", "NAME" => "A03", "TARGET" => "年代") ,array("ID" => "15", "NAME" => "A04", "TARGET" => "地域") ); $jsonRet = "["; foreach ($Record as $key => $value){ if ($totalRecord[0]["total"] > 0){ $ifleaf = "false"; } else { $ifleaf = "true"; } /* 传递自定义属性,单个字段的值 */ $jsonRet .= "{ id:'{$value["ID"]}' ,text:'{$value["NAME"]}' ,leaf:{$ifleaf} ,target:'{$value["TARGET"]}' },"; } $jsonRet = trim($jsonRet, ","); $jsonRet .= "]"; @header("Content-type: text/html; charset=utf-8"); exit($jsonRet);