extjs怎么设置tabpanel详解

extjs怎么设置tabpanel详解,第1张

ExtonReady(function(){   
    var i = 4 ;   
    //注意:每个Tab标签只渲染一次   
    var tabs = new ExtTabPanel({   
        renderTo: ExtgetBody(),//绑定在body标签上   
        activeTab: 0,//初始显示第几个Tab页   
        deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容默认true   
        tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom默认是top   
        enableTabScroll: true,//当Tab标签过多时,出现滚动条   
        items: [{//Tab的个数   
            title: 'Tab 1',   
            html: 'A simple tab',   
            listeners: {render:function(){//为每个Tab标签添加监听器当标签渲染时触发   
                ExtMsgalert("Tab 1","渲染Tab 1成功") ;   
            }}   
        },{   
            title: 'Tab 2',   
            html: 'Another one',   
            listeners: {render: myRender}   
        },{   
            title: 'Tab 3',   
            autoLoad: 'testhtml',   
            closable: true,   
            listeners: {render: myRender}   
        }],   
        bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮   
            text:'添加标签',   
            handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到)   
                var id = i ;   
                tabsadd({//添加一个Tab标签   
                    id: id,   
                    title:'Tab '+i,   
                    closable: true  
                }) ;   
                i=i+1;   
                tabssetActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签)   
            }   
        },{   
            text:'删除标签',   
            handler: function(){   
                var t = tabsgetActiveTab();//获得当前活动标签的引用   
                if(tclosable){   
                    tabsremove(t);//删除标签   
                }else{   
                    ExtMsgalert("提示","该标签不能关闭") ;   
                }   
            }   
        }]   
    });   
       
    //把TabPanel组件充满整个body容器   
    new ExtViewport({   
        layout: 'fit',   
        items: tabs   
    });   
});

以上就是关于extjs怎么设置tabpanel详解全部的内容,包括:extjs怎么设置tabpanel详解、、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9775944.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存