1.基本方式:通过定义html和items的方式。
2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：
[html]
| 代码如下 | 复制代码 |
|
<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.基本的选项卡 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事件触发。'); } |
|
我们查看一下生成的选项卡效果：
时间： 2024-10-17 03:58:28