ExtJs入门（02）-布局面板

大叔手残勿喷

于 2021-05-05 19:50:48 发布

阅读量167

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/weixin_44182157/article/details/116429282

版权

extjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>easy</title>
		<!--引入extjs样式文件-->
		<link rel="stylesheet" type="text/css"
			href="Easy/theme-gray/resources/theme-gray-all.css">
			<!--引入extjs核心库-->
			<script src="Easy/ext-all.js"></script>
	</head> 
	<body>
		<script>
			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" },
                            { title: "嵌套面板四", html: "嵌套面板四", iconCls: "12" }
                       ]
            });

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