8、树TreePanel及菜单Menu组件应用

来源：互联网发布：网络词语ab是什么意思编辑：程序博客网时间：2024/05/16 11:04

快速编写demo

创建tree.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 第一步引入Ext的样式文件 --><link type="text/css" rel="stylesheet"    href="ext-3.4.1/resources/css/ext-all.css"></link><!-- 引入Ext库文件，底层驱动 --><script src="ext-3.4.1/adapter/ext/ext-base.js"></script><!-- 引入ext-all --><script src="ext-3.4.1/ext-all.js"></script><script src="tree.js"></script></head><body></body></html>

创建tree.js

// 创建一个简单的树function simpleTree() {    // 树节点    var vroot = new Ext.tree.TreeNode({                text : "树根"            });    vroot.appendChild(new Ext.tree.TreeNode({                text : "子节点"            }));    // 树面板,第一棵树有一个根节点    var panel = new Ext.tree.TreePanel({                title : "树的示例",                width : 300,                height : 300,                root : vroot            });    panel.render(document.body);}// 从后台加载树节点，要使用树和加载顺treeLoaderfunction simpleTreeLoader() {    // 树节点    var vroot = new Ext.tree.AsyncTreeNode({                text : "树根"            });    var vloader = new Ext.tree.TreeLoader({                url : "treeDatas.js"            });    /*     * vroot.appendChild(new Ext.tree.TreeNode({ text : "子节点" }));     */    // 树面板,第一棵树有一个根节点    var panel = new Ext.tree.TreePanel({                title : "树的示例",                width : 300,                height : 300,                loader : vloader,                root : vroot            });    panel.render(document.body);}// 从后台动态加载子节点function jspTreeLoader() {    // 树节点    var vroot = new Ext.tree.AsyncTreeNode({                id : "root",                text : "树根",                leaf : false            });    var vloader = new Ext.tree.TreeLoader({                url : "tree.jsp",                baseParams : {}            });    vloader.on("beforeload", function(loader, node) {                loader.baseParams.parent = (node.id == "root" ? "" : node.text);            });    /*     * vroot.appendChild(new Ext.tree.TreeNode({ text : "子节点" }));     */    // 树面板,第一棵树有一个根节点    var panel = new Ext.tree.TreePanel({                title : "树的示例",                width : 300,                height : 300,                enableDD : true,                tbar : [{                            text : "布局",                            menu : {                                items : [{                                            text : "菜单1",                                            menu:{items:[{text:"子菜单"},{text:"子菜单2s"}]}                                        }, {                                            text : "菜单2"                                        }, "-", {                                            text : "菜单3"                                        }]                            }                        }, "->", {                            text : "查询"                        }, "请输入姓名", new Ext.form.TextField()],                loader : vloader,                root : vroot            });    panel.render(document.body);}//菜单function menuTreeLoader() {    // 树节点    var vroot = new Ext.tree.AsyncTreeNode({                id : "root",                text : "树根",                leaf : false            });    var vloader = new Ext.tree.TreeLoader({                url : "tree.jsp",                baseParams : {}            });    vloader.on("beforeload", function(loader, node) {                loader.baseParams.parent = (node.id == "root" ? "" : node.text);            });    var menu=new Ext.menu.Menu({        items:[{            text:"新建部门",            handler:function(){                Ext.Msg.prompt("提示","请输入部门名称:");            }        },{            text:"删除部门"        }]    });    /*     * vroot.appendChild(new Ext.tree.TreeNode({ text : "子节点" }));     */    // 树面板,第一棵树有一个根节点    var panel = new Ext.tree.TreePanel({                title : "树的示例",                width : 300,                height : 300,                enableDD : true,                tbar : [{                            text : "布局",                            menu : {                                items : [{                                            text : "菜单1",                                            menu:{items:[{text:"子菜单"},{text:"子菜单2s"}]}                                        }, {                                            text : "菜单2"                                        }, "-", {                                            text : "菜单3"                                        }]                            }                        }, "->", {                            text : "查询"                        }, "请输入姓名", new Ext.form.TextField()],                loader : vloader,                root : vroot            });            panel.on("contextmenu",function(node,e){                menu.showAt(e.getXY());            });    panel.render(document.body);}Ext.onReady(function() {            menuTreeLoader();        });

创建treeDatas.js

[{text:"子节点1"},{text:"子节点2",leaf:true,checked:false}]

创建tree.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%    String parent=request.getParameter("parent");    if(parent==null||"".equals(parent)) {        out.println("[{text:\"北京\"},{text:\"四川\"}]");    }    else if("北京".equals(parent)) {        out.println("[{text:\"海定\"},{text:\"昌平\",leaf:true}]");    }    else if("四川".equals(parent)) {        out.println("[{text:\"成都\"},{text:\"绵阳\",leaf:true}]");    }%>