Ext 学习之旅简单学习快乐学习之页面布局

最新推荐文章于 2019-05-21 11:49:03 发布

aqqqqa

最新推荐文章于 2019-05-21 11:49:03 发布

阅读量86

点赞数

分类专栏： Ext 文章标签： EXT CSS JavaScript HTML XHTML ViewUI

本文链接：https://blog.csdn.net/aqqqqa/article/details/83851898

版权

Ext 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="examples.js"></script>
<title>index</title>
<link type="text/css" rel="stylesheet" href="examples.css" />
</head>

<body>

<script type="text/javascript">

Ext.onReady(function(){
    new Ext.Viewport({
        enableTabScroll:true,
        layout:"border",
        items:[
            {
                id:"topPage",
                region:"north",
                //html: '<h1 class="x-panel-header">Page Title</h1>',
                //autoHeight: true,
                //border: false,
                split: true,
                //margins: '0 0 0 0',
                collapsible: true,
                collapseMode: 'mini',
                height:50,
                title:"顶部面板"
            },{
                id:"bottomPage",
                region:"south",
                collapsible: true,
                html: 'Information goes here',
                split: true,
                height: 50,
                title:"底部面板"
            },{
                id:"centerPage",
                region:"center",
                title:"中央面板",
                xtype:"tabpanel",
                enableTabScroll: true,
                activeTab: 0,
                minTabWidth: 115,
                tabWidth:135,
                resizeTabs:true,
                defaults: {autoScroll:true},
                items:[
                    {title:"面板1",html:"tab面板1的内容"},
                    {title:"面板2",html:"tab面板2的内容"}
                ]
            },{
                id:"leftPage",
                region:"west",
                collapsible: true,
                collapseMode: 'mini',
                split: true,
                width:200,
                title:"左边面板",
                layout: 'accordion',
                bodyStyle: {
                    'background-color': '#eee'
                },
                defaults: {
                    border: false
                },
                items: [
                            {title: 'Item 1',html: 'Some content'},
                            {title: 'Item 2',html: 'Some content'},
                            {title: 'Item 3',html: 'Some content'}
                        ]
            },{
                id:"rightPage",
                region:"east",
                width:100,
                collapsible: true,
                split: true,
                title:"右边面板"
            }
        ]
    });
});

</script>
</body>
</html>

aqqqqa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext 学习之旅简单学习快乐学习之页面布局

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫