Extjs open

    Ext.require(['*']);

    Ext.onReady(function() {

        Ext.QuickTips.init();

        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

		//菜单模型
		var model = Ext.define("TreeModel", { // 定义树节点数据模型  
                extend : "Ext.data.Model",  
                fields : [
                		{name : "id",		type : "string"},  
                        {name : "text",		type : "string"},  
                        {name : "iconCls",	type : "string"},  
                        {name : "leaf",		type : "boolean"},  
                        {name : 'url',		type : "string"}
                ]  
        });

		//菜单数据源
		var treeStore = new Ext.data.TreeStore({
		        model: model,
		        root: {
		            text: 'Root',
		            expanded: true,
		            children: [{
		                text: '机构管理',
		                id:1,
		                url:path+'/backend/sysUnit/main',
		                canDropOnFirst: true,
		                canDropOnSecond: true,
		                leaf: true
		            }, {
		                text: '用户管理',
		                id:2,
		                url:path+'/backend/sysUser/main',
		                canDropOnFirst: true,
		                canDropOnSecond: false,
		                leaf: true
		            }, {
		                text: '权限管理',
		                id:3,
		                url:path+'/backend/sysAuthority/main',
		                canDropOnFirst: false,
		                canDropOnSecond: true,
		                leaf: true
		            }, {
		                text: '应用系统管理',
		                id:4,
		                url:path+'/backend/sysApp/main',
		                canDropOnFirst: false,
		                canDropOnSecond: false,
		                leaf: true
		            }, {
		                text: '资源管理',
		                id:5,
		                url:path+'/backend/sysResource/main',
		                canDropOnFirst: false,
		                canDropOnSecond: false,
		                leaf: true
		            }]
		        }
		});


		//菜单树
		var treePanel=Ext.create('Ext.tree.Panel', {
		        //title: 'treePanel',
        		store: treeStore,
        		rootVisible: false,
                useArrows: true,
		        height:'100%',
		        border: false,
		        listeners : {  
		            'itemclick' : function(view,record){  
		                if(record.data.leaf){
				            //e.stopEvent();
				            //alert(record.data.id);
				            var id=record.data.id;
				            var tab = centerPanel.getComponent(id);
				            if (!tab) {
				                var n = centerPanel.add({
				                            'id' : id,
				                            'title' : record.data.text,
				                            closable : true,
				                            //width:Ext.get("formPanel").getWidth()+17,
				                            //height:centerPanel.getHeight(),
				                           // html:'<iframe frameborder="0" width="100%" height="100%" src="chartsStyle'+typeId+'!main.do?itemId='+id+'"></iframe>',
				                            autoLoad : {
				                                url : record.data.url,
				                                scripts : true
				                            } // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
				                        }).show();

				            }else{//若是存在  
          	                    	centerPanel.setActiveTab(tab);//Active  
       	                    } 
				        }else{  
		                    if(record.data.expanded){  
		                        view.collapse(record);  
		                    }else{  
		                        view.expand(record);  
		                    }  
		                }
		            } ,
		            'itemdblclick' : function(view, record, item, index, e, eOpts){  
		            	if(record.data.leaf){

				            var id=record.data.id;
				            var tab = centerPanel.getComponent(id);
				            if (tab) {
          	                    	centerPanel.remove(tab);
       	                    } 

       	                    var n = centerPanel.add({
				                            'id' : id,
				                            'title' : record.data.text,
				                            closable : true,
				                            autoLoad : {
				                                url : record.data.url,
				                                scripts : true
				                            } // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
	                        }).show();

				        }else{  
		                    if(record.data.expanded){  
		                        view.collapse(record);  
		                    }else{  
		                        view.expand(record);  
		                    }  
		                }
		            }
		        }
    	});
				//应用设置数据源
		var appTreeStore = new Ext.data.TreeStore({
	        model: model,
	        root: {
	            text: 'Root',
	            expanded: true,
	            children: [{
	                text: '绑定设备',
	                id:'/backend/bindingDevices',
	                url:path+'/backend/bindingDevices/main',
	                canDropOnFirst: true,
	                canDropOnSecond: true,
	                leaf: true
	            }, {
	                text: '报告类别管理',
	                id:'docType',
	                url:path+'/backend/docType/main',
	                canDropOnFirst: true,
	                canDropOnSecond: false,
	                leaf: true
	            }, {
	                text: '文档管理',
	                id:'/docManager',
	                url:path+'/backend/docManager/main',
	                canDropOnFirst: true,
	                canDropOnSecond: false,
	                leaf: true
	            }]
	        }
	});
		//应用管理菜单树
		var appTreePanel=Ext.create('Ext.tree.Panel', {
	        //title: 'treePanel',
    		store: appTreeStore,
    		rootVisible: false,
            useArrows: true,
	        height:'100%',
	        border: false,
	        listeners : {  
	            'itemclick' : function(view,record){  
	                if(record.data.leaf){
			            var id=record.data.id;
			            var tab = centerPanel.getComponent(id);
			            if (!tab) {
			                var n = centerPanel.add({
	                            'id' : id,
	                            'title' : record.data.text,
	                            closable : true,
	                            autoLoad : {
	                                url : record.data.url,
	                                scripts : true
	                            } 
	                        }).show();			                        
			            }else{//若是存在  
      	                    	centerPanel.setActiveTab(tab);//Active  
   	                    } 
			        }else{  
	                    if(record.data.expanded){  
	                        view.collapse(record);  
	                    }else{  
	                        view.expand(record);  
	                    }  
	                }
	            }  
	        }
	});

		//顶部面板
		var northPannel=Ext.create("Ext.panel.Panel", {
				height : 80,
				html :'<img style="padding-left:20px;padding-top:10px;"'+
				'src="'+path+'/images/sub_logo.png"></img>',
				region : 'north',
				split : true,
				bbar : [{
					iconCls : 'icon-user',
					text : sysLoginUser
				},'-',{
					text : Ext.Date.format(new Date(),'Y年m月d日')
				},'->',{
					text : '退出',
					iconCls : 'icon-logout',
					handler : function() {
			            window.location.href=path+"/logoutBackend.jsp"; 
					}
				}],
				bodyStyle : 'background-image: url('+path+'/images/admin/admin-header-bg.png)'

		});

		//中间内容面板
		var centerPanel=Ext.create('Ext.tab.Panel', {
				id:"centerPanel",
				name:"centerPanel",
                region: 'center',
                deferredRender: false,
                activeTab : 0,  
                enableTabScroll : true,  
                animScroll : true,  
                border : true,  
                autoScroll : true,  
                region : 'center',  
                split : true, 
                items: []
         });

		//左边菜单面板	
		var westPannel=Ext.create("Ext.panel.Panel", {	
				id:"westPannel",
				name:"westPannel",
				region: 'west',
                stateId: 'navigation-panel',
                title: '功能菜单',
                split: true,
                width: 200,
                minWidth: 175,
                maxWidth: 400,
                collapsible: true,
                animCollapse: true,
                margins: '0 0 0 5',
                layout: 'accordion',
                items: [{
                    title: '权限管理',
                    iconCls: 'icon-mainmenu',
                    items:[
                    	treePanel
                    ]
                },{
                	title: '应用设置',
                    iconCls: 'icon-operate',
                    items:[
                         appTreePanel
                    ]
                }]
		});

		//系统视图
        var viewport = Ext.create('Ext.Viewport', {
            id: 'viewport',
            layout: 'border',
            items: [
            	northPannel,
             	westPannel,
            	centerPanel
           	]
        });

    });