Ext JS 4.2.0文档翻译： Ext.tab.Panel
一个基本的标签页容器。TabPanel可以像一个标准的Ext.panel.Panel一样用作布局目的，但是也附带了特殊功能，可将子代组件（Components）（ 条目 ）使用一个CardLayout布局管理器管理起来，并且分别显示成单独的标签页。
注意： 默认情况下，一个标签页的关闭工具会销毁该子代标签页组件以及它的所有后代组件。这会使得该子代标签组件及它的所有后代组件不可用。要想启用某个标签页的可重用功能，则，给TabPanel 设置 autoDestroy: false 这个选项。
TabPanel的布局
TabPanels使用一个停靠（Dock）布局来将标签条放置在此部件的顶部。被添加到TabPanel 中去的那些面板（Panels）在默认情况下会自动隐藏掉它们的头部内容（header），因为标签页管理器会自动去掉相应面板中已配置的标题和图标。
TabPanels使用它们的头部或底部元素（取决于tabPosition这个配置选项）来容纳那些进行标签页选择用的按钮。这就意味着，TabPanel不会显示任何被配置的标题，也不会显示任何被配置的头部工具。
要想显示一个头部内容的话，就将该TabPanel嵌入到一个面板中，再给该面板设置 layout: 'fit' 。
控制标签页
对于其中所容纳的Ext.tab.Tab，可通过其配置选项tabConfig 来设置其配置信息：
Ext.create (' Ext.tab.Panel ', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
阻止改变
通过监听beforetabchange事件，可以阻止用户改变当前标签页。返回false，就能够阻止改变标签页。
Ext.create (' Ext.tab.Panel ', {
renderTo: Ext.getBody (),
width: 200,
height: 200,
listeners: {
beforetabchange: function(tabs, newTab, oldTab) {
return newTab.title != 'P2';
}
},
items: [{
title: 'P1'
}, {
title: 'P2'
}, {
title: 'P3'
}]
});
示例
这是一个基本的TabPanel 使用示例，它会渲染到body 元素中。这个示例也展示了一个狠有用的配置选项activeTab，它使得妳可以设置好渲染时的当前标签页。如果妳不设置activeTab，那么，默认情况下不会有当前标签页。
Ext.create (' Ext.tab.Panel ', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
可以狠容易地控制标签条里各个条目的可见性。设置hidden: true 这个选项，就可以让对应的标签条目按钮在一开始就处于隐藏状态。Items can be subsequently hidden and show by accessing the tab property on the child item.
var tabs = Ext.create (' Ext.tab.Panel ', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Home',
html: 'Home',
itemId: 'home'
}, {
title: 'Users',
html: 'Users',
itemId: 'users',
hidden: true
}, {
title: 'Tickets',
html: 'Tickets',
itemId: 'tickets'
}]
});
setTimeout(function(){
tabs.child('#home').tab.hide();
var users = tabs.child('#users');
users.tab.show();
tabs.setActiveTab(users);
}, 1000);
妳可以通过将plain属性设置为true，来去除TabBar 中的背景。
Ext.create (' Ext.tab.Panel ', {
width: 300,
height: 200,
activeTab: 0,
plain: true,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
TabPanel的另一个有用的配置选项就是tabPosition。这使得妳可以指定要将标签条放置在哪个位置。可用的选项包括'top' （默认值）和'bottom'。
Ext.create (' Ext.tab.Panel ', {
width: 300,
height: 200,
activeTab: 0,
bodyPadding: 10,
tabPosition: 'bottom',
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
setActiveTab是TabPanel 中的一个狠有用的方法，可以用来改变当前的活跃标签页。其参数可以是一个下标，也可以是一个标签页实例。例如：
var tabs = Ext.create (' Ext.tab.Panel ', {
items: [
{
id : 'my-tab',
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
var tab = Ext.getCmp ('my-tab');
Ext.create (' Ext.button.Button ', {
renderTo: Ext.getBody (),
text : 'Select the first tab',
scope : this,
handler : function() {
tabs.setActiveTab(tab);
}
});
Ext.create (' Ext.button.Button ', {
text : 'Select the second tab',
scope : this,
handler : function() {
tabs.setActiveTab(1);
},
renderTo : Ext.getBody ()
});
getActiveTab是TabPanel 中的另一个狠有用的方法，它会返回当前的活跃标签页。
var tabs = Ext.create (' Ext.tab.Panel ', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
Ext.create (' Ext.button.Button ', {
text : 'Get active tab',
scope : this,
handler : function() {
var tab = tabs.getActiveTab();
alert('Current tab: ' + tab.title);
},
renderTo : Ext.getBody ()
});
在TabPanel中，添加一个新标签页是非常简单的。妳只需简单地以针对某个面板的配置信息对象为参数调用add方法就可以了。
var tabs = Ext.create (' Ext.tab.Panel ', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
Ext.create (' Ext.button.Button ', {
text : 'New tab',
scope : this,
handler : function() {
var tab = tabs.add({
// 我们使用tabs.items这个属性来获取当前已有的条目/标签页的数目
title: 'Tab ' + (tabs.items.length + 1),
html : 'Another one'
});
tabs.setActiveTab(tab);
},
renderTo : Ext.getBody ()
});
同样地，对于TabPanel，删除一个标签页也狠简单。妳只需简单地以针对某个面板的配置信息对象为参数调用remove方法就可以了。
var tabs = Ext.create (' Ext.tab.Panel ', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
id : 'remove-this-tab',
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody ()
});
Ext.create (' Ext.button.Button ', {
text : 'Remove tab',
scope : this,
handler : function() {
var tab = Ext.getCmp ('remove-this-tab');
tabs.remove(tab);
},
renderTo : Ext.getBody ()
});
配置选项
如果为真（True），则显示一个‘关闭’（'close'）工具按钮，允许用户关闭本窗口，为假（false）则隐藏该按钮并且不允许关闭本窗口。
默认情况下，当头部区域中的关闭按钮被点击以请求关闭窗口时，会调用close方法。这将会 销毁 该面板（Panel）及其中的内容，也就意味着，它无法被重用。
要想改变行为，使得关闭一个面板时隐藏掉它而不是销毁，以便重用的话，就将closeAction设置为'hide'。
默认值：false
方法
实例方法
Ext.container.AbstractContainer
cascade( fn, [scope], [args] ) : Ext.Container chainable
按照层级关系级联地遍历本组件（在第一次调用函数时会传递进去）及其中的所有组件/容器，针对每个组件调用指定的函数。该函数的作用域（scope）（this指针）会是妳所提供的作用域或者是当前组件。该函数的参数会是妳所提供的参数或者是当前组件。如果在任何一个组件上该函数返回假（false），则，这个级联的遍历过程会在该分支上停止。
自此版本开始可用： 2.3.0
参数
-
•.fn : Function
要调用的函数
-
•.scope : Object (可选)
该函数的作用域（默认为当前组件）
-
•.args : Array (可选)
要用来调用该函数的参数。当前组件总会作为最后一个参数被传入。
返回
-
本身（this）
getChildByElement( el, deep ) : Ext.Component
返回对应着所传入的元素的那个子代组件（Component）。
参数
-
•.el : Ext.Element/HTMLElement/String
要寻找的元素（或元素的ID）。
-
•.deep : Boolean
如果为真（true），则，返回包含着所传入的元素的最深的那个后代组件。
返回
-
包含着所传入的元素的那个子代条目。
on( eventName, [fn], [scope], [options] ) : Object
addListener的缩写。
向这个对象附加一个事件处理器。For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
这个方法也允许只传入一个参数，该参数是一个配置信息对象，其中可以包含着对于多个事件的设置属性。例如：
cellClick: this.onCellClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // 重要。确保在处理器的执行过程中"this"是正确的
});
妳还可以为每个事件处理器单独指定对应的选项：
cellClick: {fn: this.onCellClick, scope: this, single: true},
mouseover: {fn: panel.onMouseOver, scope: panel}
});
还可以使用某个特定作用域里的方法的 名字 。注意，当妳使用这种方式时， 作用域 必须被指定：
cellClick: {fn: 'onCellClick', scope: this, single: true},
mouseover: {fn: 'onMouseOver', scope: panel}
});
参数
-
要监听的事件的名字。也可以使用一个对象，它的属性名字都规定要是事件名字。
-
•.fn : Function (可选)
所监听的事件将要调用的方法，或者，如果指定了作用域（ scope ）的话，则是指定的作用scope域中相应方法的名字。在被调用时，会被传入fireEvent所得到的参数，以及下面将要说明的options参数。
-
•.scope : Object (可选)
处理器函数将要于其中执行的作用域（this引用）。如果省略，则默认为触发该事件的那个对象。
-
•.options : Object (可选)
一个对象，其中包含着处理器相关的配置信息。
注意：与ExtJS 3.x不同的是，options这个对象会作为最后一个参数传递给每一个事件处理器。
这个对象，可以包含着以下任意的属性：
-
•.scope : Object
处理器函数将要于其中执行的作用域（this引用）。如果省略，则默认为触发该事件的那个对象。
-
•.delay : Number
在事件被触发之后，在调用事件处理器之前延迟的毫秒数。
-
•.single : Boolean
如果为真，则，添加一个处理器，它将在该事件下次被触发时处理该事件，然后会删除自身。
-
•.buffer : Number
使用该处理器在一个Ext.util.DelayedTask的作用下延迟执行，延迟的毫秒数由这个参数来决定。如果在这段时间内该事件再次发生的话，则，原来的那个处理器不会被调用，而是会用一个新的处理器代替它来延迟执行。
-
•.target : Ext.util.Observable
只有当该事件是由target 这个可观察对象（Observable）触发的时候才调用处理器，如果是由某个子代可观察对象通过冒泡触发的，则不调用处理器。
-
•.element : String
这个选项，只对那些被绑定到 组件 的监听器有效。 它表示的是，某个组件的某个属性的名字，该属性引用了一个将要向之上添加监听器的元素。
这个选项是狠有用的，可在组件的构造过程中给组件的那些只会在组件被渲染之后才存在的元素添加DOM 事件监听器。例如，这样来向一个Panel的body 添加一个点击事件监听器：
new Ext.panel.Panel ({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
-
•.destroyable : Boolean (可选)
如果这个参数设置为true，则，这个函数会返回一个可销毁的（Destroyable）对象。即为一个实现了destroy 方法的对象，它会在该函数里删除妳添加的所有监听器。
默认值： false
-
•.priority : Number (可选)
一个可选的优先级数字，它决定了各个处理器是按照什么样的顺序运行的。不带优先级的事件处理器会按照优先级为0的状态来运行。优先级数字较大的处理器会比优先级数字较小的处理器优先运行。优先级为负数则表示该处理器的优先级比默认优先级还低。在这个框架的内部，分别会使用大于等于1000和小于等于-1000的优先级来调度那些预期在所有其它处理器之前及之后运行的处理器，所以，当妳在程序级别的代码里设置事件处理器的优先级时，建议妳将数值保持在-999到999的范围。
组合多个选项
使用options这个参数，可以将不同类型的监听器组合在一起：
一个延迟执行的一次性监听器。
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
-
返回
-
•. Object
仅仅当妳设置了 destroyable 这个选项时才会返回。
一个Destroyable对象。即为一个实现了destroy 方法的对象，它会在该函数里删除妳添加的所有监听器。例如：
this.btnListeners = = myButton.on({
destroyable: true
mouseover: function() { console.log('mouseover'); },
mouseout: function() { console.log('mouseout'); },
click: function() { console.log('click'); }
});
然后，当妳需要删除那些监听器时：
Ext.destroy (this.btnListeners);
或
Ext.container.AbstractContainer
removeAll( [autoDestroy] ) : Ext.Component[]
删除这个容器里的所有组件。
自此版本开始可用： 2.3.0
参数
-
•.autoDestroy : Boolean (可选)
如果为真（True），则自动调用被删除的组件的Ext.Component.destroy函数。默认值与此容器的autoDestroy配置属性一致。
返回
-
•. Ext.Component[]
被删除的组件组成的数组
未知美人
张娅
Email:Website url:Opinion content:HxLauncher: Launch Android applications by voice commands
kill -9 18998