ExtJS学习之Ext.tab.Panel

Ext.tab.Panel页签组件的每一个tab页都是一个Ext.panel.Panel(关于Ext.panel.Panel的知识,可以阅读《ExtJS学习之Ext.panel.Panel》这篇文章),一般会有多个tab页同时存在,但是某一时刻只能有一个处于活动状态。下面总结了几种不同的tab页的产生方式:

1、通过items添加标签页

通过items添加标签页示例

图1:通过items添加标签页示例

如上图1的实现代码如下:

Ext.onReady(function() {
			var panel = Ext.create('Ext.tab.Panel', {
						title : 'tab示例',
						frame : true,
						width : 300,
						height : 150,
						activeTab : 0,// 默认激活第一个tab
						renderTo : Ext.getBody(),
						items : [{
									title : 'tab01',
									html : 'tab01中的内容'
								}, {
									title : 'tab02',
									html : 'tab02中的内容'
								}, {
									title : 'tab03',
									html : 'tab03中的内容'
								}, {
									title : 'tab04',
									html : 'tab04中的内容'
								}, {
									title : 'tab05',
									html : 'tab05中的内容'
								}]
					});
		});

2、动态添加标签页

上面的示例是静态添加标签,标签的数目是固定的,但是在实际开发中可能会要求动态添加或删除标签。

动态添加标签页示例

图2:动态添加标签页示例

上图2的实现代码如下:

Ext.onReady(function() {
			var tabPanel = Ext.create('Ext.tab.Panel', {
						title : 'tab动态示例',
						frame : true,
						height : 150,
						width : 300,
						activeTab : 0,
						renderTo : Ext.getBody(),
						items : [{
									title : 'tab01',
									html : 'tab01中的内容'
								}],
						buttons : [{
									text : '添加tab',
									// 注意这里不能写成addTab()
									// handler : addTab
									// handler也可以用下面这种写法
									handler : function() {
										addTab();
									}
								}]
					});

			// 定义函数
			var addTab = function() {
				var index = tabPanel.items.length;
				var tab = tabPanel.add({
					title : 'tab' + (index + 1),
					html : 'tab' + (index + 1) + '中的内容',
					closable : true
						// 允许关闭
					});
				// 设置当前显示的tab
				tabPanel.setActiveTab(tab);
			};
		});

我在开发的时候,经常会犯一个错误,就是在后面定义函数的时候,然后在Ext中调用的时候习惯性的加括号,其实在Ext中的某些地方引用是不用加括号的,需要注意下。

本文标题:ExtJS学习之Ext.tab.Panel

本文链接:http://yedward.net/?id=291

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章