Extjs4中两种定义tabPanel的方式

extjs组件比较多,看一点学习一点,天天进步中...嘿嘿。

不想说太多,直接上代码了:

　　　　

//两种创建tabpanel
Ext.require('Ext.tab.*');
Ext.onReady(function(){
        
    //第一种方式创建
    var tabs1=Ext.createWidget('tabpanel',{
        450,
        activeTab:0,
        margin:'50 10 50 80',
        defaults:{
            bodyPadding:10    
        },
        items:[{
            title:'tabl 1',
            closable:true,
            html:'tal的内容'    
            
        },{
            title:'tabl 2',
            closable:false,
            html:'tab1 2的内容'
            
            }],
            renderTo:Ext.getBody()
    });
    
    //第二种方法创建
    var tabls2=Ext.create('Ext.tab.Panel',{
        600,
        height:300,
        activeTab:0,
        plain:true,//使tab的表头突出
        margin:'0 10 0 80',
        defaults:{
            autoScroll:true,
            bodyPadding:10    
        },
        items:[{
                title:'tab 1',
                html:'very good'
            },{
                title:'tab 2',
                html:'very very good'
            },{
                title:'异步获取数据',
                loader:{
                    url: 'ajax.htm',
                    contentType:'html',
                    loadMask:true    
                },
                listeners:{
                    activete:function(tab){
                        tab.loader.load
                    }    
                }
                }],
            renderTo:Ext.getBody()    
        
    });
    
});

效果:

在Ext中tabPanel与tab可以分开,这样就更灵活多变了.请看下面的例子:

　　代码:

Ext.require('Ext.tab.*');
Ext.onReady(function(){
            var currentItem;
            var tabs=Ext.create('Ext.tab.Panel',{
                600,
                height:250,
                magin:'10',
                resizeTabs:true,
                enableTabScroll:true,
                defaults:{
                    autoScroll:true,
                    bodyPadding:10    
                },
                items:[{
                        title:'选项卡',
                        html:'选项卡的内容',
                        closable:true
                }],
                renderTo:'tab'
                
            });
        var index=0;
        function addTab(closable){
            ++index;
            tabs.add({
                title:'新选项卡'+index,
                html:'新选项卡内容'+index+'<br/><br/>',
                closable:!!closable    
                
            }).show();
            
        }
        
        Ext.createWidget('button',{
            renderTo:'add',
            text:'创建可关闭的选项卡',
            handler:function(){
                
                addTab(true);    
            }
            
        });
        
        Ext.createWidget('button',{
            renderTo:'add',
            text:'创建不可关闭的选项卡',    
            handler:function(){
                addTab(false);            
            },
            style:'margin-left:8px'
        });
    
});

效果：

　　html中有两个div:<div id="add"></div>

　　　　　　　　　　<div id="tab"></div>