ExtJS学习之Ext.tab.Panel

Ext.tab.Panel页签组件的每一个tab页都是一个Ext.panel.Panel(关于Ext.panel.Panel的知识,可以阅读《ExtJS学习之Ext.panel.Panel》这篇文章),一般会有多个tab页同时存在,但是某一时刻只能有一个处于活动状态。下面总结了几种不同的tab页的产生方式:

1、通过items添加标签页

通过items添加标签页示例

图1:通过items添加标签页示例

如上图1的实现代码如下:

Ext.onReady(function() {
    var panel = Ext.create('Ext.tab.Panel', {
        title: 'tab示例',
        frame: true,
        width: 300,
        height: 150,
        activeTab: 0,
        // 默认激活第一个tab
        renderTo: Ext.getBody(),
        items: [{
            title: 'tab01',
            html: 'tab01中的内容'
        },
        {
            title: 'tab02',
            html: 'tab02中的内容'
        },
        {
            title: 'tab03',
            html: 'tab03中的内容'
        },
        {
            title: 'tab04',
            html: 'tab04中的内容'
        },
        {
            title: 'tab05',
            html: 'tab05中的内容'
        }]
    });
});

2、动态添加标签页

上面的示例是静态添加标签,标签的数目是固定的,但是在实际开发中可能会要求动态添加或删除标签。

动态添加标签页示例

图2:动态添加标签页示例

上图2的实现代码如下:

Ext.onReady(function() {
    var tabPanel = Ext.create('Ext.tab.Panel', {
        title: 'tab动态示例',
        frame: true,
        height: 150,
        width: 300,
        activeTab: 0,
        renderTo: Ext.getBody(),
        items: [{
            title: 'tab01',
            html: 'tab01中的内容'
        }],
        buttons: [{
            text: '添加tab',
            // 注意这里不能写成addTab()
            // handler : addTab
            // handler也可以用下面这种写法
            handler: function() {
                addTab();
            }
        }]
    });

    // 定义函数
    var addTab = function() {
        var index = tabPanel.items.length;
        var tab = tabPanel.add({
            title: 'tab' + (index + 1),
            html: 'tab' + (index + 1) + '中的内容',
            closable: true
            // 允许关闭
        });
        // 设置当前显示的tab
        tabPanel.setActiveTab(tab);
    };
});

我在开发的时候,经常会犯一个错误,就是在后面定义函数的时候,然后在Ext中调用的时候习惯性的加括号,其实在Ext中的某些地方引用是不用加括号的,需要注意下。

本文标题:ExtJS学习之Ext.tab.Panel

本文链接:http://yedward.net/post/291.html

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

本博客不提供评论功能,有任何问题请发送邮件至:yedward92@qq.com

相关文章