有哪些信誉好的足球投注网站- 1、本文档共10页，可阅读全部内容。
- 2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
ExtJs4 笔记 Ext.tab.Panel 选项卡
ExtJs4 笔记 Ext.tab.Panel 选项卡
本篇讲解选项卡控件。
一、基本选项卡
首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：
1.基本方式:通过定义html和items的方式。
2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：
[html]
1
2
3
4
5
6
7
8
9
10 h1基本选项卡/h1
div?class=content style=height: 150px
????div?id=tabPanel
????????div?style=display: none
????????????div?id=oneTab
????????????????p这个tab所展示的内容是读取至其他HTML标签/p
????????????/div
????????/div
????/div
/div [Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 //1.基本的选项卡
var?tabs1 = Ext.createWidget(tabpanel, {
????renderTo:?tabPanel,
????activeTab: 1,???????????????????????//指定默认的活动tab
????width: 600,
????height: 120,
????plain:?true,????????????????????????//True表示tab候选栏上没有背景图片（默认为false）
????enableTabScroll:?true,??????????????//选项卡过多时，允许滚动
????defaults: { autoScroll:?true?},
????items: [{
????????id:?tab1,
????????title:?普通Tab,
????????html:?这只是一个非常普通的Tab。,
????????items:[{xtype:button,text:按钮}],
????????closable:?true??????????????????//这个tab可以被关闭
????}, {
????????id:?tab2,
????????title:?内容来至div,
????????contentEl:?oneTab?????????????//指定了当前tab正文部分从哪个html元素读取
????}, {
????????id:?tab3,
????????title:?Ajax Tab,
????????autoLoad: { url:?AjaxTabContent, params: { data:?从客户端传入的参数?}, method:?GET?}
????}, {
????????id:?tab4,
????????title:?事件Tab,
????????listeners: { activate: handleActivate },
????????html:?带事件的Tab。
????}, {
????????id:?tab5,
????????title:?不可用Tab,
????????disabled:?true,
????????html:?不可用的Tab，你是看不到我的。
????}]
});
//单击tab4后触发的事件
function?handleActivate(tab) {
????alert(tab.title +?: activated事件触发。);
}
我们查看一下生成的选项卡效果：
二、操作选项卡
选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：
[html]
1
2 h1操作选项卡/h1
div?class=content id=content2/div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56 var?inde
文档评论（0）