viewport布局

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <script typt="text/javascript" src="../ext/ext-all.js"></script>
    <link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
    <link rel="stylesheet" href="../css/工具和菜单条.css"/>
</head>
<body>
<div id=""></div>
<script typt="text/javascript">
    Ext.onReady(function () {
       var viewport=new Ext.Viewport({
           frame:true,
           layout:'border',

           renderTo:Ext.getBody(),
           items:[{/*元素集*/
               region:'north',
               height:120,
               bodyStyle:'background-image:url(../image/daohang.png); background-repeat:no-repeat; background-size:100% 100%;',
               items:[{
                   buttons:[{
                       text:'关于我们',
                       iconCls:'aboutUs'
                   },{
                       text:'推出系统',
                       iconCls:'loginout'
                   }]
               }]
           },{/*元素集*/

               region:'center',
               xtype:'tabpanel',
             items:[{
                 title:'首页',
                 iconCls:'openFile',
                 bodyStyle:'background-image:url(../image/cengter.jpg); background-repeat:no-repeat;background-size:100% 100%;'
             }]
           },{/*元素集*/
               title:'在线选课系统',
                region:'west',
                width:180,

               collapsible:true,/*展开收缩*/
               items:[{
                   items:[new Ext.tree.Panel({
                       border:false,/*去掉边框*/
                       root:{/*节点,对象*/
                           text:'系统菜单',
                           border:false,
                           expanded:true,/*展开状态*/
                           children:[{
                               text:'用户管理',
                               icon:'../image/tianjia.png',
                               children:[{
                                   text:'添加用户',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'修改用户',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'删除用户',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'查询用户',
                                   icon:'',
                                   leaf:true
                               }]
                           },{
                               text:'成绩管理',
                               icon:'../image/tianjia.png',
                               children:[{
                                   text:'查询成绩',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'修改成绩',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'删除成绩',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'查询成绩',
                                   icon:'',
                                   leaf:true
                               }]
                           },{
                               text:'课程管理',
                               icon:'../image/tianjia.png',
                               children:[{
                                   text:'添加课程',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'修改课程',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'删除课程',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'查询课程',
                                   icon:'',
                                   leaf:true
                               }]
                           },{
                               text:'报名管理',
                               icon:'../image/tianjia.png',
                               children:[{
                                   text:'我要报名',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'修改报名',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'删除报名',
                                   icon:'',
                                   leaf:true
                               },{
                                   text:'查询报名',
                                   icon:'',
                                   leaf:true
                               }]
                           }]
                       }
                   })]
               }]
           },{/*元素集*/
               region:'south',
               border:false,
              height:30,
              tbar:['当前登陆用户:【admin】','->','地址:百度','版权所有,<a href="www.baidu.com">北方网</a>']

           }]
       });
    });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42666837/article/details/83618897