Ext.define('MyApp.views.Viewport', { extend: 'Ext.container.Viewport', //extend requires:['MyApp.stores.TreeStore'], //important layout: { type: 'border' }, initComponent: function() { var me = this; var treeStore = MyApp.stores.TreeStore; Ext.applyIf(me, { items: [ { xtype: 'container', height: 25, region: 'north' }, { xtype: 'treepanel', id: 'west-panel', store:treeStore, rootVisible: false, margin: '0 0 0 0', maxWidth: 400, minWidth: 185, width: 200, title: '后台菜单', region: 'west', split: true, collapsible :true, viewConfig: { border: 'false', id: '主菜单', autoScroll: false, listeners : { 'itemclick' : function(view,record,item,index,e){ var tabs = Ext.getCmp("tab"); if(record.raw.leaf){ //判断是否为子节点 e.stopEvent(); var n = tabs.getComponent(record.raw.id); if (!n) { //判断是否已打开 n = tabs.add({ xtype:'panel', itemId : record.raw.id, title: record.raw.text, autoScroll:true, closable:true, closeAction:'close', autoLoad:{ url:record.raw.url, scripts:true } }); } tabs.setActiveTab(n); } } } } }, { xtype: 'tabpanel', frame: true, id: 'tab', resizable: true, activeTab: 0, minTabWidth: 115, maxTabWidth: 135, region: 'center', items: [ { xtype: 'panel', title: '基站状态显示', id: 'index', bodyStyle : 'padding:5px', html : "<iframe id='eachColliery' src='../houtai/systemstate.jsp' width='100%' height='100%' ></iframe>", closable : false, autoScroll : true } ] }, { xtype: 'container', height: 25, region: 'south' } ] }); me.callParent(arguments); } });