• extJS4.2.0 tabPanel学习（三）

    1. 了解添加tab的函数

    这里设置为自动添加，菜单是从后台获取的数据，前台进行双击的时候，添加tab页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    Ext.define('MVC.controller.MainController', {
        extend: 'Ext.app.Controller',
      
      
        stores:['MenuStore','NewsStore'],
        models:['MenuModel','NewsModel'],
        views:['Viewport'],
        init: function() {
            console.log('测试controller文件是否找到！');
            this.control({
                'menulist':{
                    itemdblclick: this.openTab
                }
            });
        },
        openTab:function(view, record, item, index, e){
            console.log('测试双击是否执行！'+record['data']['text']);
             
        var pnCenter = Ext.getCmp('content_panel');
        var tabId = "tab-" + record.raw.id;
        var tabTitle = record.raw.text;
        var url = record.raw.url;
        var newTab = Ext.getCmp(tabId); 
        Ext.log("record.raw.url:"+url); 
        if (!newTab) { 
            newTab = pnCenter.add(new Ext.Panel({
                            id: tabId,
                            title: tabTitle,
                            autoScroll: true,
                            iconCls: 'tabIconCss',
                            layout: 'fit', //layout一定要是fit，不然显示grid会有问题。
                            border: false,
                            closable: true,
                            fitToFrame:true,
                            items: [Ext.create('MVC.view.'+url)]
           }));
            pnCenter.setActiveTab(newTab); 
        }else { //如果tab中存在，那么就直接将节点指向这个页面 
            pnCenter.setActiveTab(newTab); 
        } 
     
         }
    });

    注意：

    Ext.getCmp('content_panel');content_panel是id值，代表的是内容页的id号，执行之前表示已经存在；

    Ext.create('MVC.view.'+url)中'MVC.view.'+url代表的是命名空间，执行之后就说明之前尚未存在；

       Right.js tab要显示的位置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    Ext.define('MVC.view.main.Right', {
                extend : 'Ext.tab.Panel',
                initComponent : function() {
                    Ext.apply(this, {
                                id : 'content_panel',
                                region : 'center',
                                defaults : {
                                    autoScroll : true,
                                    bodyPadding : 10
                                },
                                activeTab : 0,
                                border : false,
                                // plain: true,
                                items : [{
                                            id : 'HomePage',
                                            title : '首页',
                                            iconCls : 'home',
                                            layout : 'fit'
                                        }]
                            });
                    this.callParent(arguments);
                }
            });
  • 相关阅读:
    sql性能调优的注意项
    mybatis获取刚插入数据的ID
    mysql
    JQuery
    JS
    css
    web前端
    python爬虫
    socket编程
    python基础
  • 原文地址：https://www.cnblogs.com/wang3680/p/da9c131ed803823f8cbd8f7cead05d0e.html
Copyright © 2020-2023  润新知