viewport布局

最新推荐文章于 2024-05-18 15:26:40 发布

奋斗的蜗牛，奔跑吧

最新推荐文章于 2024-05-18 15:26:40 发布

阅读量406

点赞数

分类专栏： Extjs

本文链接：https://blog.csdn.net/weixin_42666837/article/details/83618897

版权

Extjs 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<!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>']