您的位置：首页 > Web前端 > JavaScript

ExtJs学习笔记(10)_Window窗口的Border布局

2008-09-01 14:15 483 查看

以下源自ExtJs的官方示例,稍加注释而已

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

<title>Window LayOut</title>

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../ext-all-debug.js"></script>

<style type="text/css">

.x-panel-body p {

margin:10px;

font-size:12px;

}

</style>

</head>

<body>

<script type="text/javascript">

Ext.onReady(function() {

var button = Ext.get('show-btn');

var win;

button.on('click', function() {

//创建TabPanel

var tabs = new Ext.TabPanel({

region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间

margins: '3 3 3 0',

activeTab: 0,

defaults: {

autoScroll: true

},

items: [{

title: 'Bogus Tab',

html: "第一个Tab的内容."

}, {

title: 'Another Tab',

html: "我是另一个Tab"

}, {

title: 'Closable Tab',

html: "这是一个可以关闭的Tab",

closable: true

}]

});

//定义一个Panel

var nav = new Ext.Panel({

title: 'Navigation',

region: 'west', //放在西边，即左侧

split: true,

width: 200,

collapsible: true, //允许伸缩

margins: '3 0 3 3',

cmargins: '3 3 3 3'

});

//如果窗口第一次被打开时才创建

if (!win) {

win = new Ext.Window({

title: 'Layout Window',

closable: true,

width: 600,

height: 350,

border : false,

plain: true,

layout: 'border',

closeAction:'hide',

items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局

});

}

win.show(button);

});

});

</script>

<input type="button" id="show-btn" value="Show Window"/>

</body>

</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航