Ext_js第二课

这是小编的第二个作品，虽有严重模仿情节，不过目前仍在学习中啦！

效果图：

JS代码：

<script>
    Ext.onReady(function(){
    //    Ext.MessageBox.alert('hello','你好!张三!');
        /*var panel=new     Ext.Panel({
            title:'mypanel',
            renderTo:'myTab',
            width:600,
            height:300,
            html:'<h1>测试</h1>'
       
        })*/
        var i=4;
        var tabPanel=new Ext.TabPanel({
            title:'mytabpanel',
            renderTo:Ext.getBody(),
            activeTab:1,
            width:600,
            height:300,
            items:[new Ext.Panel({
                title:'面板1',
                height:30,
                html:'<h1 style="color:green" id="test">test</h1>',
                 listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发    
                    Ext.Msg.alert("Tab 1","渲染Tab 1成功") ;    
                }}
           
           
            }),new Ext.Panel({
                title:'面板2',
                height:30,
                html:'<h1 style="color:green" id="test">test</h1>',
                listeners:{
                    render:function(){
                        Ext.MessageBox.alert('Tab 2','渲染Tab2 成功');
                    }
                }
           
            }),new Ext.Panel({
                title:'面板3',
                height:30,
                html:'<h1 style="color:green" id="test">test</h1>'
           
            })],
            bbar:[
                {
                        text:'添加标签',
                        handler:function(){
                            var id=i;
                            tabPanel.add({
                                id:id,
                                title:'面板'+i,
                                closable:true
                            });
                            i=i+1;
                            tabPanel.setActiveTab(id);
                           
                        }
                },{
                        text:'删除标签',
                        handler:function(){
                               var t = tabPanel.getActiveTab();//获得当前活动标签的引用    
                               if(t.closable){
                                    tabPanel.remove(t);
                               }else{
                                    Ext.Msg.alert("提示","该标签不能关闭");
                               }
                        }
                    }
                ]
       
    });
       
   
   
   
    })


</script>

 

 

评论

1 楼 fengyingfeng_19 2013-11-07