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

来自为知笔记(Wiz)