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

刘金剑

浏览: 147930 次
性别:
来自: 北京

最近访客更多访客>>

you

atianchen

ckql

haeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT CSS JavaScript HTML XHTML

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