ExtJS002

最新推荐文章于 2021-02-13 00:21:54 发布

陶hj

最新推荐文章于 2021-02-13 00:21:54 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJS

本文链接：https://blog.youkuaiyun.com/thj0v0/article/details/41259203

ExtJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用EXTJS实现的手风琴布局案例，通过边界布局整合了顶部、底部、侧边栏及主体区域，并展示了如何创建可折叠的导航面板。

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

<%--
Created by IntelliJ IDEA.
User: taohj
Date: 2014/11/3
Time: 20:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>EXT JS 布局</title>
<link rel="stylesheet" type="text/css" href="./js/ext/resources/css/ext-all.css">
<script type="text/javascript" src="./js/ext/bootstrap.js"></script>
<script type="text/javascript" src="./js/ext/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
var accordion = Ext.create("Ext.panel.Panel", {
title: "导航栏—west",
layout: "accordion", //设置为手风琴布局
layoutConfig: {
animate: true
},
width: 250,
minWidth: 90,
region: "west", //设置方位
split: true,
collapsible: true,
items: [
{ title: "用户管理", html: "嵌套面板一", iconCls: "save" },
{ title: "商品管理", html: "嵌套面板二", iconCls: "search" },
{ title: "系统管理", html: "嵌套面板三", iconCls: "back" }
]
});

new Ext.Viewport({
title: "Viewport",
layout: "border", //这里是（border）边界布局
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
accordion, //这里是（accordion）手风琴布局
{ region: "north", height: 100, html: '系统名称—north' },
{ region: "center", split: true, border: true, html: 'center' },
{ region: "south", html: "版权—south", split: true, border: true, height: 50 }
]
});
});
</script>
</body>
</html>