求一颗extjs 的tree

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<div >这是一个关于最常用的很简单的树的例子。这个例子上添加了单击事件和右键菜单。</div>
<br/>
<div id="simpleTree" style="padding: 10px 10px 10px 20px;"></div>
<br/>
<script>
/**
* 常用树类
*/
var SimpleTree = function() {
    SimpleTree.superclass.constructor.call(this, {
title      : "部门",
/** 是否自动显示滚动条 */
autoScroll : true,
/** 渲染到目标DIV中 */
renderTo   : "simpleTree",
split    : true,
frame    : true,
width      : 300,
border    : true,
height     : 200,
/** 是否显示动画效果 */
animate    : true,
rootVisible : true,
containerScroll : true,
/** 设置样式 */
layoutConfig : {
fill : true,
activeOnTop : false,
autoWidth   : true,
titleCollapse : true,
collapseFirst : false,
hideCollapseTool : false
},
/** 根设置 */
root : new Ext.tree.AsyncTreeNode({
/** id可以不要 */
id       : 'all',
text     : '所有部门',
/** 是否展开根目录 */
expanded : true,
draggable: false
}),
/** 数据加载 */
dataUrl : "js/widgets/tree/FavoriteTree.php",
/** 右键菜单 */
contextmenu : new Ext.menu.Menu({
id: 'contextMenu',
         items: [{
             text: '查看',
scope: this,
handler: function() {
/** 得到选中节点的句柄 */
var selectedNode = this.getSelectionModel().getSelectedNode();
this.showDetailWin(selectedNode.text, selectedNode.attributes.desc);
}
}]
})
});
/** 定义单击事件 */
this.on('click',this.onClick, this);
/** 定义右键菜单 */
this.on("contextmenu", this.setMenu,this);

};

Ext.extend(SimpleTree, Ext.tree.TreePanel,{
/**
* 单击事件的实现
* @param {Object} node
* @param {Object} e
*/
onClick : function (node, e) {
if(node.isLeaf()){
// 停止浏览器事件及阻止事件冒泡
e.stopEvent();
this.showDetailWin(node.attributes.text, node.attributes.desc);
}
},
/**
* 设置右键菜单
* @param {Object} node
* @param {Object} e
*/
setMenu : function(node, e) {
// 阻止浏览器事件
e.preventDefault();
//结点进入选择状态
        node.select();
        this.contextmenu.showAt(e.getXY());
},
/**
* 设置详细信息的显示窗口
* @param {Object} title
* @param {Object} html
*/
showDetailWin : function (title,html) {
if(!html) html = "暂无信息！";
new Ext.Window({
title : "查看" + title + "的详细信息",
width : 320,
height: 180,
plain : true,
layout:'fit',
modal : true,
items : [{
xtype : "panel",
style : "padding:2px 3px 3px 2px",
html  : html
}]
}).show();
}
});
/** 初始化组件 */
new SimpleTree();
</script>
</body>
</html>public void doPost(HttpServletRequest request,
HttpServletResponse response) {
     String json = "[{
    text:'北京总公司'
    ,qtip:'北京总公司'
    ,children:[{
        text:'市场部'
        ,qtip:'北京市场部'
        ,desc: "主管北京市场相关工作！"
        ,leaf:true
    },{
        text:'人力资源部'
        ,qtip:'北京人力资源部'
        ,desc: "对北京公司的各类人员形成的资源进行管理！"
        ,leaf:true
    },{
        text:'财务部'
        ,qtip:'财务部'
        ,desc: "对所有公司（包括分公司）的财务（报销、工资等）进行管理！"
        ,leaf:true
    }]
},{
    text:'重庆分公司'
    ,qtip:'重庆总公司'
    ,children:[{
        text:'市场部'
        ,qtip:'重庆市场部'
        ,desc: "主管重庆市场相关工作！"
        ,leaf:true
    },{
        text:'人力资源部'
        ,qtip:'重庆人力资源部'
        ,desc: "对重庆公司的各类人员形成的资源进行管理！"
        ,leaf:true
    }]
},{
    text:'四川分公司'
    ,qtip:'四川总公司'
    ,children:[{
        text:'市场部'
        ,qtip:'四川市场部'
        ,desc: "主管四川市场相关工作！"
        ,leaf:true
    },{
        text:'人力资源部'
        ,qtip:'四川人力资源部'
        ,desc: "对四川分公司的各类人员形成的资源进行管理！"
        ,leaf:true
    }]
},{
    text:'深圳分公司'
    ,qtip:'深圳总公司'
    ,children:[{
        text:'市场部'
        ,qtip:'深圳市场部'
        ,desc: "主管深圳市场相关工作！"
        ,leaf:true
    },{
        text:'人力资源部'
        ,qtip:'深圳人力资源部'
        ,desc: "对深圳分公司的各类人员形成的资源进行管理！"
        ,leaf:true
    }]
}]";
     PrintWriter out = response.getWriter();
     out.print(json);
     out.flush();
     out.close();
}
ext库中有现成的例子，而且比较简单，楼主可以直接用

调试易

求一颗extjs 的tree

解决方案 »