精华内容
下载资源
问答
  • tabPanel
    2021-02-28 09:56:59

    在使用TabPanel时,有时候可能会遇到这样的情况,tab打开再关闭后会出错。这是因为tab默认关闭的方式是'close',这样会销毁(destroy)tab的控件,如果你将panel或其他控件的定义放在onReady之外,定义的方法如:new Panel({..})就不会被执行,会出现空引用错误,而在onReady之内就会将实例化的方法再执行。

    要控制tab的开关,先要了解这几个方法:

    void unhideTabStripItem(index/id/item)显示tab(只显示header)

    void hideTabStripItem(index/id/item)隐藏tab(只隐藏header)

    void show()显示tab(只显示body)

    void hide()隐藏tab(只隐藏body)

    例子:

    //显示, 放在按钮事件处理 或 树节点击事件中

    var tabs=new TabPanel({..});

    var newPanel=new Panel({id:'myPanel',title:'hello',closable:true,html:'hello'});

    var myPanel=tabs.getItem('myPanel');

    if(myPanel==null){

    tabs.add(myPanel).show()

    }

    else{

    tabs.unhideTabStripItem(myPanel.show());   }

    //关闭

    tabs.on('beforeremove', function(tabs, tab) {

    tabs.hideTabStripItem(tab.hide());

    return false;

    });

    更多相关内容
  • TabPanel

    2019-07-28 06:28:21
    NULL 博文链接:https://daishuanglong.iteye.com/blog/789697
  • 如何在MATLAB中做出标签页的效果-tabpanel2.6.zip 刚才看到有会员朋友说matlab中控件少,math说ActiveX中多的是啊,于是我也就顺便打开ActiveX看看里面都有什么。突然看到个单词tabbed……难道这就是困扰我多日的...
  • 这是用于 MATLAB 的 TabPanel 的完整实现,它为内置的 MATLAB UI 对象提供了一致的外观和感觉。 实现了两种类型的标签面板。 第一种类型是通常的标签面板,标签位于相对于可见面板的左侧/中间/右侧顶部/底部。 第二...
  • TabPanel Constructor 提供了在 MATLAB 中创建 tabpanels 的最简单方法! - 无需编程! - 可以使用 GUIDE 轻松编辑所有标签面板! - 支持所有 MATLAB UI 控件。 - 结果是原始的 FIG 文件和随附的 M 文件,该文件...
  • ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框
  • React咏叹调 寻求共同维护者!...npm install react-aria-tabpanel 依存关系: React0.14.x react-dom 0.14.x 该库的模块化方法意味着您最好使用诸如Browserify或Webpack之类的模块捆绑系统将其
  • TabPanel 加载页面

    2019-04-22 01:24:48
    NULL 博文链接:https://wlhx.iteye.com/blog/1949444
  • 代码如下: var tabIndex = ‘shouye’;... /** * 向TabPanel组件中添加窗口或激活已经存在的窗口 * 并将指定资源加载进窗口 * @param node : 传入的Node节点 */ var loadPanel = function(node) { var
  • jquery的tabpanel

    2017-04-06 20:53:33
    基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...
  • 该工具由两个函数 DRAWTAB 和 HITTAB 组成。 这两个函数允许在 MATLAB 中创建选项卡面板。 要构建每个选项卡的“内部”,您只需为每个选项卡面板编写一个函数并将所有句柄存储在选项卡的用户数据中。...
  • 最近在做一个物流管理的项目,公司必须要求用Extjs4.1来做界面,因为以前一直也没有接触过所以开发的过程中遇到了很多的困难。同时Extjs4.1的资料在网上也相对来说较少。好了,不说废话上代码: 1....
  • ExtJS TabPanel 标签操作

    2019-03-16 01:55:53
    NULL 博文链接:https://rowen.iteye.com/blog/446163
  • NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
  • NULL 博文链接:https://hao3721.iteye.com/blog/733162
  • NULL 博文链接:https://icyfire.iteye.com/blog/412574
  • 博文链接:https://jfp.iteye.com/blog/178889
  • 代码如下:/**模仿tabpanel导航栏*/Ext.define(‘ux.TabBar’, { alternateClassName: ‘tabBar’, extend: ‘Ext.Toolbar’, xtype: ‘tabBar’, config: { docked: ‘bottom’, cls: ‘navToolbar’, ...
  • Extjs Tabpanel的使用

    2019-05-24 11:58:55
    本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡的Panel,可以在选项卡之间切换。它是多个不同内容的容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引...

    本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡的Panel,可以在选项卡之间切换。它是多个不同内容的容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引从0开始。下面介绍extjs中tabPanel的用法

    一、tabPanel主要配置项


    activeTab

    初始激活的tab,索引或者id值,默认为none
     
    autoTabs

    是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。当该配置项设为true时,需要设deferredRender为false,还必须使用applyTo。


    deferredRender

    是否延迟渲染,默认为true。


    autoTabSelector

    默认为'div.x-tab'。
     
    resizeTabs

    是否可以改变tab的尺寸,默认为false。


    minTabWidth

    tab的最小宽度,默认为30。


    tabWidth

    每个新增加的tab宽度,默认为120。
     

    tabTip

    tab的提示信息
     
    tabPosition

    tab位置,可选值有top、bottom,默认为top


    enableTabScroll

    是否允许Tab溢出时可以滚动,默认为false。
     

    closable

    tab是否可关闭,默认为false
     
    scrollDuration

    每次的滚动时长,默认为0.35毫秒。
     

    scrollIncrement

    每次的滚动步长,默认为100像素。
     

    wheelIncrement

    每次鼠标滑轮的滚动步长,默认为20像素。
     

    二、tabPanel主要方法

    getActiveTab()

    获取当前活动的tab


    get( String/Number key )

    根据组件id或者索引获取组件


    getItem(String id)

    根据tab id获取tab
     

    setActiveTab( String/Number item )

    设置某个面板为活动面板


    remove( Component/String component, [Boolean autoDestroy] )

    移除某个面板


    removeAll( [Boolean autoDestroy] )

    移除所有面板

     

    三、Tab的正文内容获取方式

     

    1、基本方式 : 通过定义html和items的方式。

    Ext.onReady(function(){
    var config = {
        height:150,
        width:300,
        activeTab:0, //默认激活第一个tab页
        animScroll:true, //使用动画滚动效果
        enableTabScroll:true, //tab标签过宽时自动显示滚动条
        renderTo:'panel',
        //通过items将标签页以子面板的方式加入TabPanel
        items:[
            {title:'tab标签页1',html:'tab标签页1内容'},
            {title:'tab标签页2',html:'tab标签页2内容'},
            {title:'tab标签页3',html:'tab标签页3内容'},
            {title:'tab标签页4',html:'tab标签页4内容'},
            {title:'tab标签页5',html:'tab标签页5内容'}
            ]
        }
        new Ext.TabPanel(config);
    });

    2.读取其他html的信息 : 通过设置contentEl就可以获取其他html的信息为当前tab正文。

    <script>
    Ext.onReady(function(){
    var config = {
    height:50,
    width:300,
    autoTabs:true, //自动扫描页面中的有效div然后转换为标签
    deferredRender:false, //不进行延时渲染
    //deferredRender:true,
    activeTab:0, //默认激活第一个标签
    animScroll:true, //使用动画滚动效果
    enableTabScroll:true, //tab标签超宽时自动出现滚动条
    applyTo:'panel' //此处必须使用applayTo定位
    }
    new Ext.TabPanel(config);
    });
    </script>
    <div id="panel">
    <div class="x-tab" title="tab标签页1">tab标签页1内容</div>
    <div class="x-tab" title="tab标签页2">tab标签页2内容</div>
    <div class="x-tab" title="tab标签页3">tab标签页3内容</div>
    <div class="x-tab" title="tab标签页4">tab标签页4内容</div>
    <div class="x-tab" title="tab标签页5">tab标签页5内容</div>
    </div>
    <div class="x-tab" title="tab标签页6">无效tab标签页6内容</div> 

     

    3、读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

    4、动态添加标签页

    Ext.onReady(function(){
    var config = {
    height:150,
    width:300,
    activeTab:0, //默认激活第一个tab页
    animScroll:true, //使用动画滚动效果
    enableTabScroll:true, //tab标签超宽时自动出现滚动按钮
    renderTo:'panel',
    items:[
    {title:'tab标签页1',html:'tab标签页1内容'}
    ],
    //自动添加标签的按钮
    buttons:[
    {
    text:'添加标签页',
    handler:addTabPage //处理函数
    }
    ]
    }
    var tabPanel = new Ext.TabPanel(config);
    //添加tab页
    function addTabPage()
    {
    var index = tabPanel.items.length + 1;
    //创建新标签页
    var tabPage = tabPanel.add({
    title:'tab标签页' + index,
    html:'tab标签页' + index + '内容',
    closable:true //允许关闭该标签页
    });
    //设置当前显示的标签页
    tabPanel.setActiveTab(tabPage);
    }
    });

     

    四、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
    });
    }); 

     

    效果图:

    这两个小箭头的代码是:this.enableTabScroll = this.enableTabScroll || true;

    激活当前面板的属性为:this.setActiveTab(tabid);

    MainPanel = function(){
            MainPanel.superclass.constructor.call(this, {
            region:'center',
            contentEl:'center',
            plugins: new Ext.ux.TabCloseMenu(),
    //        layout:'fit',
            items:[
                   new Ext.ux.IFrameComponent({id:'main-iframe',url:SRM_CONTEXT + (auditpage != '' ? auditpage : frameurl),title:"个人首页",scrolling:'auto'})
                  ]
            });
    };
    Ext.extend(MainPanel, Ext.TabPanel, {
    
    loadIframe2 : function(href,menuid,menubaseid,menubasecode,mores){
        if(href.indexOf("http://") == -1){
            href=SRM_CONTEXT+href;
        }
        if(href.indexOf("?")==-1)
        {
          href+='?menuid='+menuid;
        }
        else
        {
          href+='&menuid='+menuid;
        }
        
        href+='&menubaseid='+menubaseid;
        href+='&menubasecode='+menubasecode;
        var tabid = 'main-iframe'+menubaseid;
        //直接添加TabPanel进行添加多个页签
        this.add(new Ext.ux.IFrameComponent({id:tabid,title:mores.text,url:href,scrolling:'auto',closable:true}));
        this.setActiveTab(tabid); //激活当前被选中的面板
        this.enableTabScroll = true;  //当为多个时可以滚动
        this.doLayout(); //重新加载布局
    },
    展开全文
  • ExtJs的TabPanel做的非常棒,因此在J2EE开发中可以优先选用,但是要注意以下事项:1.TabPanel是主页面,每一个tab标签就是一个自动加载的Jsp页面;2.主页面包含了对ExtJs的JS引用,比如:那么子页面就绝对不能再重复...

    ExtJs的TabPanel做的非常棒,因此在J2EE开发中可以优先选用,但是要注意以下事项:

    1.TabPanel是主页面,每一个tab标签就是一个自动加载的Jsp页面;

    2.主页面包含了对ExtJs的JS引用,比如:

    那么子页面就绝对不能再重复添加这些JS引用;只能引用它页面用的js;

    3.子页面不能使用Viewport对象布局;(IE中会显示不出来的)

    4.tabPanel上面添加的各个panel(就是各个子页面)rendTo的DIV的id不能相同-----所有,建议各个子页面的id都不要重复

    主页面例子如下:

    Ext.onReady(function(){

    var center=new Ext.TabPanel({

    defaults:{autoScroll:true},

    enableTabScroll:true,

    collapsible:true,

    autoHeight:true,

    renderTo:'indexdiv',

    items:[{

    id:'01',

    title:'Event任务分配',

    autoHeight:true,                      // 自动加载jsp页面

    autoLoad:{url:ctx+'/toEventTaskPage.action?optType=E',scripts:true},

    listeners:{                   // 添加监听器,点击此页面的tab时候要重新加载(刷新功能)

    activate:function(){

    this.getUpdater().refresh();

    }

    }

    },{

    id:'02',

    title:'拆条任务分配',

    autoHeight:true,

    autoLoad:{url:ctx+'/toSplitEventTaskPage.action?optType=S',scripts:true},

    listeners:{

    activate:function(){

    this.getUpdater().refresh();

    }

    }

    },{

    id:'03',

    title:'其他任务分配',

    autoHeight:true,

    autoLoad:{url:ctx+'/toOtherTaskPage.action?optType=O',scripts:true},

    listeners:{

    activate:function(){

    this.getUpdater().refresh();

    }

    }

    }]

    });

    center.setActiveTab(0);

    });

    展开全文
  • 次我们要实现的控件时Tab控件,在实际的应用中也比较多
  • extjs4.2.1 tabPanel刷新及关闭标签
  • Extjs4.2 设置tabpanel当前活动页签的样式
  • extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
  • jQuery模仿ExtJS之TabPanel最新

    热门讨论 2011-02-25 14:19:48
    TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL> 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 ...
  • "requires": [ "ux" //加载Ext.ux包 ], 实际配置如下: 然后在应用中请求包 requires: [ 'Ext.ux.TabReorderer', ], 实际配置如下: 在tabpanel组件中,加载tabreorderer控件。 plugins: { tabreorderer: true }, ...

    1.环境说明

    ExtJS版本:7.4.0.42
    Sencha Cmd: v7.5.1.20
    开发工具:WebStorm 2022.1.1
    PS:如果是老版本的ExtJS,引入Ext.ux.TabReorderer.js,然后加载plugins即可。

    2.进行配置

    在app.json中加载Ext.ux包。大约在510行左右。

    "requires": [
        "ux"  //加载Ext.ux包
    ],

    实际配置如下:image


    然后在应用中请求包

    requires: [
        'Ext.ux.TabReorderer',
    ],

    实际配置如下:image


    在tabpanel组件中,加载tabreorderer控件。

    plugins: {
        tabreorderer: true
    },

    实际配置如下:image


    开启查看
    打开控制台,切换到项目下,执行:

    sencha app watch

    搞定,可以拖拽Tab标签页了。image

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,124
精华内容 3,249
关键字:

tabPanel