4、Panels、Windows和TabPanel
Panels、TabPanels及Windows都是ExtJS常用的容器组件。
4.1、Ext.Panel程序例子
下面是一个典型的Panel的应用。通过阅读这个例子,你可以对Panel容器组件的使用有一个较为完整的了解:
var myBtnHandler = function(btn) {
Ext.MessageBox.alert('You Clicked', btn.text);
}
var fileBtn = new Ext.Button({
text : 'File',
handler : myBtnHandler
});
var editBtn = new Ext.Button({
text : 'Edit',
handler : myBtnHandler
});
var tbFill = new Ext.Toolbar.Fill();
var myTopToolbar = new Ext.Toolbar({
items : [
fileBtn,
tbFill,
editBtn
]
});
var myBottomToolbar = [
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'<b>Items open: 1</b>',
];
var myPanel = new Ext.Panel({
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!',
buttons : [
{
text : 'Press me!',
handler : myBtnHandler
}
],
tools : [
{
id : 'gear',
handler : function(evt, toolEl, panel) {
var toolClassNames = toolEl.dom.className.split(' ');
var toolClass = toolClassNames[1];
var toolId = toolClass.split('-')[2];
Ext.MessageBox.alert('You Clicked', 'Tool ' + toolId);
}
},
{
id : 'help',
handler : function() {
Ext.MessageBox.alert('You Clicked', 'The help tool');
}
}
]
});
运行结果:
4.2、Ext.Window应用例子
下面是Exit.Window容器组件的应用例子,注意其中的animateTarget : btn.el属性的使用,通过这个属性,可以以动感的方式打开窗口:
var win;
var newWindow = function(btn) {
if (! win) {
win = new Ext.Window({
animateTarget : btn.el, //注意这句的作用
html : 'My first vanilla Window',
closeAction : 'hide',
id : 'myWin',
height : 200,
width : 300,
constrain : true
});
}
win.show();
}
new Ext.Button({
renderTo : Ext.getBody(),
text : 'Open my Window',
style : 'margin: 100px',
handler : newWindow
});
运行结果:
再看一个配置相对比较多的Ext.Window组件使用的例子:
var win = new Ext.Window({
height : 75,
width : 200,
modal : true,
title : 'This is one rigid window',
html : 'Try to move or resize me. I dare you.',
plain : true,
border : false,
resizable : false,
draggable : false,
closable : false,
buttonAlign : 'center',
buttons : [
{
text : 'I give up!',
handler : function() {
win.close();
}
}
]
})
win.show();
4.3、Ext.TabPanel应用例子
TabPanel的例子:
var simpleTab = {
title : 'My first tab',
html : 'This is my first tab!'
}
var closableTab = {
title : 'I am closable',
html : 'Please close when done reading.',
closable : true
}
var disabledTab = {
title : 'Disabled tab',
id : 'disabledTab',
html : 'Peekaboo!',
disabled : true,
closable : true
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : 'myTPanel',
//layoutOnTabChange : true,
enableTabScroll : true,
items : [
simpleTab,
closableTab,
disabledTab,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : 'fit',
items : tabPanel
}).show();
Ext.getCmp('myTPanel').unhideTabStripItem('disabledTab');
//以下为两个新的TabPanel的对象
var embeddedTabPanel = {
title : 'My second tab',
closable : true,
xtype : 'tabpanel',
activeTab : 0,
items : [
{
title : 'Inner tab 1'
},
{
title : 'Inner tab 2'
}
]
}
var complexTab = {
title : 'A Complex tab',
layout : 'border',
defaults : {
frame : true,
split : true
},
items : [
{
html : 'Center Panel',
region : 'center'
},
{
html : 'North Panel',
region : 'north',
height : 25
},
{
html : 'West Panel',
region : 'west',
height : 25
}
]
}
- 大小: 20.7 KB
- 大小: 6.8 KB
分享到:
相关推荐
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
TabPanel是ExtJS提供的一种布局管理器,它允许在一个容器中创建多个面板(Panels),每个面板有自己的标签,用户可以通过点击标签在不同的面板间切换。TabPanel可以方便地管理和展示大量的内容,尤其适合于构建复杂...
在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及自定义菜单等高级功能。 首先,让我们了解TabPanel的基本结构。在ExtJS中,TabPanel是一个容器,可以包含多个Panel...
在网页设计中,TabPanel常用于减少页面的拥挤感,提高信息的组织性和可读性。jQuery库因其简洁的API和强大的DOM操作能力,成为实现这种功能的理想选择。 在"TabPanel选卡结合右键菜单实例"中,我们关注的是如何将...
在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,如刷新当前标签页、关闭特定标签页等。 #### 刷新当前标签页 在ExtJS 4.2.1中,要实现刷新当前标签页的功能,可以采用以下方式: ```javascript ...
首先,我们看到有两个JavaScript文件,TabPanel.js和TabPanel2.js。TabPanel.js可能是基础的TabPanel类,而TabPanel2.js可能包含了垂直页签的扩展或改进。在ExtJS中,扩展通常用于添加新功能或改变现有组件的行为。...
在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `tabPanel` 的基本用法包括以下几个方面: 1. 创建 `tabPanel`: 要创建一个 `tabPanel`,你需要先定义一个 `Ext.container.TabPanel` 实例。在...
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...
`TabPanel`提供了更好的组织和导航功能,使得用户可以更高效地浏览和操作复杂的应用程序。 `TabPanel`的实现方式多种多样,常见的有HTML/CSS/JavaScript、Java Swing、.NET WinForms、WPF以及各种Web框架如ASP.NET...
在IT行业中,TabPanel是一种常见的用户界面元素,广泛应用于各种应用程序和网页设计中。它用于组织和展示多个视图或面板,每个面板通常包含不同的内容,用户可以通过点击不同的标签在这些面板之间切换。这个...
基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...
【标题】"TabPanel 选项卡"是一种常见的网页设计元素,用于组织和展示多个相互关联的内容区域。在网页设计中,TabPanel 提供了一种整洁、高效的方式,让用户通过点击不同的标签来切换显示不同的信息板块,提高用户...
在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且直观的多面板应用。本篇文章将深入探讨EXTJS中tabpanel的激活操作及其注意事项。 首先,我们来看tabpanel的激活操作。在EXTJS...
总结,EXT JS的`TabPanel`支持动态页面加载,通过设置`lazy`属性和监听`tabchange`事件,我们可以实现在`Tab`被激活时按需加载内容,有效提高了应用性能。结合`ComponentLoader`或Ajax请求,可以灵活地加载HTML内容...
这时候等侯一下,会出现一个运行的figure和一个小面板,在面板上有几项分别是(从上到下从左到右)添加标签、编辑标签、更新标签、当前标签前移、当前标签后移、设置、信息。这是点击第一个,就可以添加标签页了,...
TabPanel的使用,添加tab,加载页面,添加事件
在这个“javascript+css+tabpanel的实现”中,我们将深入探讨如何使用HTML、JavaScript和CSS来创建一个功能完备且交互友好的Tab Panel系统。 首先,HTML是构建页面结构的基础。Tab Panel的基本HTML结构通常包括一个...
至于`tabAdv.doc`和`TabCloseMenu.js`这两个文件,它们可能是关于`TabPanel`的高级功能或特定实现的文档和脚本。`tabAdv.doc`可能包含了更深入的使用指南、示例代码或者自定义功能的介绍,如支持右键关闭选项卡、...
通过以上两种方法——调整`autoDestroy`和`closeAction`属性——我们可以有效地解决Ext中`TabPanel`关闭后再打开不显示的问题。这些技巧不仅能够提升用户体验,还能够在复杂的业务场景下提供更加灵活的界面管理方案...