Ext Grid 独孤九剑-第八式

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> var  index  =   1 ;
/* * write by Huy Vanpull  */
function  mylayout_1() {
     /* * 初始化提示信息  */
    Ext.QuickTips.init();
     /* * 设置中间内容的tabPanel  */
     var  cPanel  =   new  Ext.TabPanel({
                title : '主面板',
                region : 'center',
                contentEl : 'center - div',
                split :  true ,
                activeTab :  0 ,
                border :  true ,
                frame :  true ,
                collapsible :  true ,
                enableTabScroll :  true ,
                items : [{
                            title :  " tab advantage " ,
                            autoLoad : {
                                url :  " /ext/page/base/index.jsp " ,
                                scripts :  true
                            }
                        }]
            });
     /* * 这里不能只设置一个变量  */
     var  tree_1  =  myTree_1(cPanel);
     var  tree_2  =  myTree_1(cPanel);
     var  tree_3  =  myTree_1(cPanel);

     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]
                        }, cPanel]
            });
}
Ext.onReady(mylayout_1);

function  myTree_1(cPanel) {
     var  root  =   new  Ext.tree.TreeNode({
                text : '主菜单'
            });
     /* * 学籍管理及其子菜单  */
     var  root_1  =   new  Ext.tree.TreeNode({
                text : '学籍管理',
                icon : ' / ext / img / girl.gif'
            });
     var  root_1_1  =   new  Ext.tree.TreeNode({
                text : '添加学生',
                qtip : '添加学生',
                listeners : {
                     " click "  :  function (node, e) {
                        cPanel.add({
                                    title :  " newtab " ,
                                    id :  " newtab "   +  index,
                                    closable :  true ,
                                    autoLoad : {
                                        url :  " /ext/page/base/index.jsp " ,
                                        scripts :  true
                                    }
                                });
                        cPanel.setActiveTab( " newtab "   +  index);
                        index ++ ;
                    }
                }

            });
     var  root_1_2  =   new  Ext.tree.TreeNode({
                text : '删除学生',
                qtip : '删除学生'
            });
     var  root_1_3  =   new  Ext.tree.TreeNode({
                text : '浏览学生',
                qtip : '浏览学生'
            });
    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 : '考勤管理',
                qtip : '考勤管理',
                icon : ' / ext / img / boy.gif'
            });
     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;
}