`
chengyue2007
  • 浏览: 1490245 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

ExtJs标签TabPanel

 
阅读更多
function myRender(p){   
    Ext.Msg.alert("提示",p.title+"渲染成功") ;   
}   
Ext.onReady(function(){   
    var i = 4 ;   
    //注意:每个Tab标签只渲染一次   
    var tabs = new Ext.TabPanel({   
        renderTo: Ext.getBody(),//绑定在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标签添加监听器.当标签渲染时触发   
                Ext.Msg.alert("Tab 1","渲染Tab 1成功") ;   
            }}   
        },{   
            title: 'Tab 2',   
            html: 'Another one',   
            listeners: {render: myRender}   
        },{   
            title: 'Tab 3',   
            autoLoad: 'test.html',   
            closable: true,   
            listeners: {render: myRender}   
        }],   
        bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮   
            text:'添加标签',   
            handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到).   
                var id = i ;   
                tabs.add({//添加一个Tab标签   
                    id: id,   
                    title:'Tab '+i,   
                    closable: true  
                }) ;   
                i=i+1;   
                tabs.setActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签).   
            }   
        },{   
            text:'删除标签',   
            handler: function(){   
                var t = tabs.getActiveTab();//获得当前活动标签的引用   
                if(t.closable){   
                    tabs.remove(t);//删除标签   
                }else{   
                    Ext.Msg.alert("提示","该标签不能关闭") ;   
                }   
            }   
        }]   
    });   
       
    //把TabPanel组件充满整个body容器.   
    new Ext.Viewport({   
        layout: 'fit',   
        items: tabs   
    });   
});  

 

分享到:
评论
1 楼 wenlifang530 2012-07-12  
能不能贴一个完整的border布局的,west 渲染中部的面板  ,可以转换中部面板的内容

相关推荐

    extjs4.2.1 tabPanel刷新及关闭标签

    ### ExtJS 4.2.1 TabPanel 刷新与关闭标签功能详解 #### TabPanel 组件简介 在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式...

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    ExtJS TabPanel 标签操作

    ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...

    extjs动态添加tabpanel标签页支持pannel嵌入

    extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以

    ExtJS tabPanel实例

    在ExtJS中,`tabPanel` 是一个非常重要的组件,它允许你在一个容器内创建多个标签页,每个标签页可以承载不同的内容,提供了类似桌面应用的用户体验。在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `...

    ExtJS TabPanel beforeremove beforeclose使用说明

    在ExtJS中,TabPanel是常用的组件,用于展示多个面板(Panel)并提供标签页切换功能。当用户尝试关闭TabPanel中的某个Panel时,我们可能需要执行一些验证或确认操作,例如弹出对话框询问用户是否真的要关闭当前页面...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...

    ext的tabpanel的激活与注意事项

    EXTJS的tabpanel是其组件库中的一个重要组成部分,用于创建具有多个选项卡的用户界面,每个选项卡代表一个独立的视图或工作区。在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且...

    ExtJS-3.4.0系列:Ext.TabPanel

    在本文中,我们将深入探讨ExtJS中的`Ext.TabPanel`组件,它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图,每个面板都有自己的标题,并且可以通过标签页进行切换。让我们...

    Ext的Tab标签封装

    "Ext的Tab标签封装"指的是使用ExtJS库创建的TabPanel组件,它允许用户在一个区域内通过点击不同的标签来展示不同的内容面板。 在描述中提到的"兼容Firefox 和 IE浏览器",这意味着该封装方法考虑到了跨浏览器的兼容...

    ext tab

    标题“ext tab”可能指的是EXTJS库中的TabPanel组件,这是一种在Web应用中常用的功能,用于展示多个视图或页面,用户可以通过标签页在不同内容间切换。EXTJS是一个用JavaScript编写的富客户端UI框架,它提供了丰富的...

    ExtJS效果Tabs形式

    TabPanel是ExtJS提供的一种容器组件,专门用于创建带有可切换标签的布局。它允许你在同一区域内显示多个面板(Panel),每个面板对应一个标签。通过配置TabPanel的属性和方法,你可以自定义标签的外观、行为以及...

    extjs扩展标记

    4. **使用与集成**:在JSP页面中引入EXTJS标签库后,可以通过标签直接创建EXTJS组件,大大简化了代码编写。例如,创建一个简单的GridPanel,只需在JSP页面中插入对应的EXTJS标签,并设置相关属性即可。 5. **优势与...

    关于extjs中tabPanl关闭后的内存释放

    TabPanel是ExtJS框架中一个常用且功能强大的组件,用于创建多标签界面,提升用户交互体验。然而,在实际应用中,尤其是当大量TabPanel实例同时存在或频繁切换时,可能会遇到内存使用率异常升高的问题。这主要源于...

    extjs4.0.7后台管理框架

    EXTJS4.0.7的TabPanel组件支持这一特性,每个标签页可以包含不同的组件或视图,提供灵活的工作空间管理。开发者可以通过编程或用户交互来添加、删除和切换标签页,提高后台管理的效率和用户体验。 EXTJS4.0.7后台...

    Ext中的tabpanel关闭后再打开不显示的问题

    在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新打开该标签页,则可能会出现无法正常显示的情况...

    TabPanel 加载页面

    `TabPanel`的实现方式多种多样,常见的有HTML/CSS/JavaScript、Java Swing、.NET WinForms、WPF以及各种Web框架如ASP.NET、ExtJS、Vue.js等。在给定的标题"TabPanel加载页面"中,我们可以理解为讨论的是如何在`...

    Extjs做的treepanel+tab切换页

    3. **TabPanel**:TabPanel 是ExtJS中的另一个重要组件,它允许多个视图在一个容器中以选项卡的形式存在,用户可以通过点击不同的标签在多个视图之间切换。在这个案例中,TabPanel 位于TreePanel 的右侧,用于展示...

Global site tag (gtag.js) - Google Analytics