Ext Grid 独孤九剑-第七式 -CSDN博客

本文介绍如何使用ExtJS框架实现一个包含多种区域布局的界面，并详细展示了树形菜单的具体实现过程，包括节点的创建及树形面板的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/** write by Huy Vanpull */
function mylayout_1() {
    /** 初始化提示信息 */
    Ext.QuickTips.init();
    /** 这里不能只设置一个变量 */
    var tree_1 = myTree_1();
    var tree_2 = myTree_1();
    var tree_3 = myTree_1();
    var viewport = new Ext.Viewport({
                layout : 'border',
                items : [{
                            title : 'LOG',
                            region : 'north',
                            contentEl : 'north-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            height : 50,
                            minSize : 50,
                            maxSize : 120
                        }, {
                            title : '状态栏',
                            region : 'south',
                            contentEl : 'south-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            height : 50,
                            minSize : 50,
                            maxSize : 120
                        }, {
                            title : '帮助',
                            region : 'east',
                            contentEl : 'east-div',
                            split : true,
                            border : true,
                            collapsed : true,//东面帮助菜单默认折叠
                            collapsible : true,
                            width : 120,
                            minSize : 120,
                            maxSize : 200
                        }, {
                            title : '菜单栏',
                            region : 'west',
                            contentEl : 'west-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            width : 170,
                            minSize : 150,
                            maxSize : 200,
                            layout : "accordion",//右边菜单的布局方式
                            items : [tree_1,tree_2,tree_3]
                        }, {
                            title : '主面板',
                            region : 'center',
                            contentEl : 'center-div',
                            split : true,
                            border : true,
                            collapsible : true
                        }]
            });
}
Ext.onReady(mylayout_1);

function myTree_1() {
    var root = new Ext.tree.TreeNode({text:'主菜单'});
    /** 学籍管理及其子菜单 */
    var root_1 = new Ext.tree.TreeNode({text:'学籍管理'});
    var root_1_1 = new Ext.tree.TreeNode({text:'添加学生'});
    var root_1_2 = new Ext.tree.TreeNode({text:'删除学生'});
    var root_1_3 = new Ext.tree.TreeNode({text:'浏览学生'});
    root_1.appendChild(root_1_1);
    root_1.appendChild(root_1_2);
    root_1.appendChild(root_1_3);
    /** 考勤管理及其子菜单 */
    var root_2 = new Ext.tree.TreeNode({text:'考勤管理'});
    var root_2_1 = new Ext.tree.TreeNode({text:'添加考勤'});
    var root_2_2 = new Ext.tree.TreeNode({text:'删除考勤'});
    var root_2_3 = new Ext.tree.TreeNode({text:'浏览考勤'});
    root_2.appendChild(root_2_1);
    root_2.appendChild(root_2_2);
    root_2.appendChild(root_2_3);

    /** 添加到主菜单 */
    root.appendChild(root_1);
    root.appendChild(root_2);

    /** 创建树面板 */
    var tree = new Ext.tree.TreePanel({
                title : '系统设置',
                border : false,//是否有边框
                rootVisible:false,//是否显示跟结点
                useArrows:true,
                qtip:"提示"
            });
    /** 把上面的数据设置到树面板中去 */
    tree.setRootNode(root);
    return tree;
}