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







posted @ 2015-05-28 13:43  Tim&Blog  阅读(323)  评论(0)  编辑  收藏  举报