extJS4.2.0 tabPanel学习（三）
了解添加tab的函数
这里设置为自动添加，菜单是从后台获取的数据，前台进行双击的时候，添加tab页
| 12345678910111213141516171819202122232425262728293031323334353637383940414243 | 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要显示的位置
| 1234567891011121314151617181920212223 | 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)