EXTJS 学习总结（3） Ext.Window

最新推荐文章于 2018-11-10 15:55:38 发布

原创最新推荐文章于 2018-11-10 15:55:38 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #windows #function #button #html #tree

Extjs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用ExtJS创建可配置窗口的例子，其中包括TabPanel和TreePanel组件的使用方法。通过两个按钮分别演示了如何在隐藏后再次显示窗口以及如何在关闭后重新创建并显示窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(); }