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

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

2011-08-09 14:09 218 查看

EXTJS里面有很多的example，各路高手都建议初学者去看看，学习。于是我就从窗口开始，一个一个看，一个一个做下注释，备忘个。给自己，也给别人。。。

<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 win;
var button = Ext.get("btn");
button.on("click",function(){
if(!win){
win = new Ext.Window({
applyTo:'hello-win',//渲染节点
layout:'fit',//布局方式
width:500,
height:300,
closeAction:'hide',//设置点击右上角关闭按钮时，只是隐藏窗口，而非销毁
plain:true,//根据API上说是和window.body的背景色有关的，可能因为设置问题，个人没发现true和false有什么不同
items://加入子组件
new Ext.TabPanel({
applyTo:'hello-tabs',//选项卡渲染的div id
autoTabs:true,//会查询DOM中任何带有"x-tab"样式类的div元素，转化为tab加入到面板中
activeTab:1,//渲染的tab有两个，0表示初始状态第一个活动，1表示第二个活动。
deferredRender:true,//标识tab不是在只有第一次访问的时候才渲染，在上面closeAction注视掉的情况下，这个设为true，则窗口在关闭后第二次将不会被渲染。即不显示。
border:true//显示一套2px宽的内边框
}),
buttons:[{
text:'Submit',
disabled:true
},{
text:'Close',
handler:function(){
win.hide();
}
}]
});
}
win.show(button);
});
});
</script>
</head>
<body>
<button id="btn">show window</button>
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<div class="x-tab" title="Hello 111">
<p>hello......</p>
</div>
<div class="x-tab" title="Hello 222">
<p>....world</p>
</div>
</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航