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

本文详细介绍了ExtJs4的选项卡组件,包括基本选项卡的创建、操作选项卡的方法,如动态新增、删除,以及设置选项卡位置、可拖动、菜单式展示、右键菜单和分组等功能的实现。
摘要由CSDN通过智能技术生成

本篇讲解选项卡控件。

一、基本选项卡

首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取:

1.基本方式:通过定义html和items的方式。

2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。

3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:精心开发5年的UI前端框架!

<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>
 
//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事件触发。');
}
 

我们查看一下生成的选项卡效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值