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

EXTJS 学习总结（3） Ext.Window

2009-12-07 17:17 453 查看

1，前台

<body>
<form id="form1" runat="server">
<div id="win" class="x-hidden">
</div>
<div>
<button id="btnHide" onclick="ShowAfterHide();">Show Windows After Hide</button>
<button id="btnShow" onclick="ShowAfterClose();">Show Windows After Close</button>
</div>
</form>
</body>
</html>

2，JS部分

var win;
Ext.onReady(function() {

//TablPanel生成
var tab = new Ext.TabPanel({
activeTab: 0, //当前标签为第1个tab（从0开始索引）
border: true,
items: [
{ title: "tab1", html: "tab1在windows窗口中" },
{ title: "tab2", html: "tab2在windows窗口中" }
]
});

//TreePanel生成
var tree = new Ext.tree.TreePanel({
title: 'The TreePanel',
split: true,
autoScroll: true,
autoHeight: false,
containerScroll: true,
collapsed: false,
root: new Ext.tree.TreeNode({
id: 'treeRoot',
text: '根节点',
draggable: true,
expanded: true
})
});

win = new Ext.Window({
contentEl: "win", //主体显示的html元素，也可以写为el:"win"，也可以不定义
width: 400,
height: 500,
title: "标题",
closeAction: 'hide',
/*可选项 hide，close，
如果是hide，点击右上角小叉关闭后仅仅是隐藏，使用show()可以再显示该窗体
如果是close，则正是关闭该窗体，show不再起作用,
需要像ShowAfterClose() 方法那样重新生成窗体
*/
modal: true, //true为模式窗口，除了当前窗体之外的部分无法操作，默认为false
layout: 'accordion', //窗体布局模式设定
items: [
tree,
tab
],
plain: true,
expandOnShow: true

});

win.show();
});

function ShowAfterHide() {
win.show();
}

function ShowAfterClose() {
win = new Ext.Window({
//contentEl: "win", //重新生成窗体时，不可重复定义
width: 300,
height: 200,
title: "标题",
modal: true
});
win.show();
}

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

标签：

相关文章推荐

新的分享

章节导航