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)