Extjs 中Tabpanel使用以及tab切换事件

Extjs 中Tabpanel使用以及tab切换事件

在使用extjs开发中我们有时候会使用到标签页这种组件用于显示多种分类的信息，这里将简单介绍一下怎么使用。

先看代码，具体是创建了一个窗口，这个窗口内再创建了一个TabPanel，其中第一个tab内部还嵌套了一个form表单。

j={code:'代码',name:'名称'}；
var win = Ext.create('Ext.window.Window', {
title: ('信息修改'),
autoWidth: true,
autoHeight: true,
maximizable: true,
maximized: false,
width: 760,
height: 500,
modal: true,
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: '定义',
itemId: 'dy',
items: [{
xtype: 'form',
frame: true,
autoWidth: true,
autoHeight: true,
buttonAlign: 'center',
autoScroll: true,
defaults: {labelWidth: 80},
items: [{
xtype: 'textfield',
fieldLabel: '名称',
name: 'name',
value: j.name,
allowBlank: false,
emptyText: '请输入名称',
blankText: '名称不能为空'
}, {
xtype: 'textfield',
fieldLabel: '名称',
name: 'name',
value: j.name,
allowBlank: false,
emptyText: '请输入名称',
blankText: '名称不能为空'
}, {
xtype: 'textfield',
fieldLabel: '名称',
name: 'name',
value: j.name,
allowBlank: false,
emptyText: '请输入名称',
blankText: '名称不能为空'
}]
}]
}, {
title: '要素',
html: 'Users',
itemId: 'zc'
}, {
title: '图',
html: 'Tickets',
itemId: 'jg'
}, {
title: '表',
html: 'Tickets',
itemId: 'ph'
}, {
title: '体系',
html: 'Tickets',
itemId: 'zb'
}, {
title: '评价',
html: 'Tickets',
itemId: 'yy'
}, {
title: '建议',
html: 'Tickets',
itemId: 'fz'
}],
//tab切换事件
listeners:{
'tabchange':function (t, n) {
alert(n.itemId);
}
}
}]
}).show();

这样我们就建好了这个窗口了，可以进行展示我们的tab了，但是很多时候我们希望标签页的数据是通过异步加载来完成，只有在进行切换的时候才加载数据，因此这时候我们就要用到tabpanel提供的tabchange事件了。

//tab切换事件
listeners:{
'tabchange':function (t, n) {
alert(n.itemId);
}
}

在上面的代码中看到具体的切换事件是怎么定义的，同时切换时候也提供了部分参数，因为常用到的应该就是要切换到的tab所以我列出的参数较少，具体可以参考extjs官方的说明，如下：

tabchange( tabPanel, newCard, oldCard, eOpts )
Fires when a new tab has been activated (activated by setActiveTab).

Parameters
tabPanel : Ext.tab.Panel
The TabPanel
newCard : Ext.Component
The newly activated item
oldCard : Ext.Component
The previously active item
eOpts : Object
The options object passed to Ext.util.Observable.addListener.

从字面意思大概也能知道具体的参数意思，我们就能对这些参数进行自定义操作。