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

extjs学习----官方模版注释3

2011-08-09 17:32 197 查看

本篇是有关于窗口基本布局的。里面有两个属性。我暂时还没了解到。有人知道的，拿砖砸下我。。。砸醒我。。。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>test page</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.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var button = Ext.get('show-btn');//本句不解释
button.on('click',function(){
//tabs for the center
var tabs = new Ext.TabPanel({
region:'center',//使用border布局时，定位属性
margins:'3 3 3 0',
activeTab:0,//指出初始化时活动的tab选项，默认为都不活动。
defaults:{//应用在全体组件上的配置项对象，也就是说全部的对象
autoScroll:true// 当出现内容溢出时，会出现滚动条，false则不会
},
items:[{
title:'bogus tab',
html:'the first tab'
},{
title:'another tab',
html:'the second tab'
},{
title:'Closable tab',
html: 'the tab can be closed!',
closable:true//带有关闭小叉叉的
}]
});
//Panel for the west
var nav = new Ext.Panel({
title:'navigation',
region:'west',
split:'false',
width:200,
collapsible:true,
margins:'3 0 3 3',//？？？？
cmargins:'3 3 3 3'//？？？？
});
var win = new Ext.Window({
title:'Layout Window',
closable:true,
width:600,
height:400,
plain:true,
layout:'border',
items:[nav,tabs]//将前面定义好的两个面板添加到window中
});
win.show(button);
});
});
</script>
</head>
<body>
<input type="button" id="show-btn" value="show window"/>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航