二章 Ext 框架基础及核心 （2）

主要了解对象的生成与使用

通过前一节，我们已经可以加载窗口，现在要开始使用简单的布局控件，TabPanel是比较常用的。

官方自带的例子已比较全面，总结如下：

1. 创建

Ext.require('Ext.tab.*');

Ext.onReady(function(){
    // basic tabs 1, built from existing content
    var tabs = Ext.createWidget('tabpanel', {
        renderTo: 'tabs1',   //渲染到一个ID为  tabs1的DIV上
        id:'Tabs1',
        width: 450,
        activeTab: 0,            //默认激活第1个Tab
        tabPosition: 'bottom',  //在下方
        defaults :{
            bodyPadding: 10
        },
        items: [{
            contentEl:'script',    //显示的内容为页面上 ID为 script 的组件的内容
            title: 'Short Text',
            closable: true
        },{
            contentEl:'markup', 
            title: 'Long Text'
        }]
    });
});

创建了一个带有激活页，Tabs在下方的组件。

2.  使用

     在另外的JS中我们可以控制这个对象， 使用 Ext.getCmp(对象ID);

    如上例使用  var TTab=Ext.getCmp('Tabs1');

   1) 使用其属性 如  alert(TTab.id);  显示它的ID

   2) 激活另一页  TTab.setActiveTab(1);      调用方法可为：  setActiveTab( String/Number/Ext.Component card )

   3)   

setTimeout(function(){                                          //1秒定时任务
         tabs.child('#home').tab.hide();                           //tabs的Home子页隐藏
         var users = tabs.child('#users');                        // 得到users子页
                 users.tab.show();                                        // 显示users页
                tabs.setActiveTab(users);                          //设置激活users页
          }, 1000);

    4) plain: true                       //  设置纯背景

    5) 增加新tab

       

Ext.create('Ext.button.Button', {
    text    : 'New tab',
    scope   : this,
    handler : function() {
        var tab = tabs.add({
            // we use the tabs.items property to get the length of current items/tabs
            title: 'Tab ' + (tabs.items.length + 1),
            html : 'Another one'
        });

        tabs.setActiveTab(tab);
    },
    renderTo : Ext.getBody()
});

    6) 移除tab

Ext.create('Ext.button.Button', {
    text    : 'Remove tab',
    scope   : this,
    handler : function() {
        var tab = Ext.getCmp('remove-this-tab');
        tabs.remove(tab);
    },
    renderTo : Ext.getBody()
});