ExtJs4 笔记 Ext.tab.Panel 选项卡.doc

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