Ext4.0学习：树

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