Ext Grid 独孤九剑-第七式

/* * 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;
}