Extjs 之 viewport

// 页面布局
var viewport = {

	north: new Ext.BoxComponent({

		 region: 'north'
		,contentEl: 'viewport_north'
		,height: 32 // give north and south regions a height

	})
	
	
	,south: {
			
		// lazily created panel (xtype:'panel' is default)

		region: 'south',
		contentEl: 'viewport_south',

		split: true,
		height: 100,
		minSize: 100,
		maxSize: 200,
		collapsible: true
		,collapsed: true
		,title: '关于'
		,margins: '0 0 0 0'
	}
	
	
	,east: {

		region: 'east',
		title: '附属栏',
		collapsible: true,
		split: true,
		width: 300,
		minSize: 175,
		maxSize: 400,
		margins: '0 5 0 0',
		layout: 'fit', // specify layout manager for items
		items:            // this TabPanel is wrapped by another Panel so the title will be applied

		new Ext.TabPanel({
			
			id: 'department_tree_tabPanel'

			,border: false, // already wrapped so don't add another border

			activeTab: 0, // second tab initially active

			tabPosition: 'bottom'
			,
			defaults:{
				autoScroll:true
			}			
			,
			items: [
				new Ext.Panel({
					 title: '详情'
					,id: 'department_detail_panel'
					,ref: '../department_detail_panel'
					,html:'<div id="filter_panel" style="overflow:auto;"></div>'
					,autoScroll: true
					,
					defaults:{
						autoScroll:true
					}			
					
				})
				,{
		
					title: '帮助',	            
					id: 'department_help'	        	,
					html: '<p>这里是帮助信息。</p>',	
					autoScroll: true
		
				}
			]

		})

	}
	
	
	,west: {

		region: 'west',

		id: 'west-panel', // see Ext.getCmp() below

		title: '菜单',

		split: true,

		width: 200,

		minSize: 175,

		maxSize: 400,

		collapsible: true
		,collapsed: true
		,

		margins: '0 0 0 5',

		layout: {

			type: 'accordion',

			animate: true

		},

		items: [{

			contentEl: 'viewport_west',

			title: '部门管理',

			border: false,

			iconCls: 'nav' // see the HEAD section for style used

		}, {

			title: '配置',

			html: '<p>这里是配置信息。</p>',

			border: false,

			iconCls: 'settings'

		}]

	}
	

	,center: new Ext.TabPanel({

         region: 'center' // a center region is ALWAYS required for border layout
        ,deferredRender: false
        ,activeTab: 0     // first tab initially active
		,tabPosition: 'bottom'

        ,items: [{

             contentEl: 'viewport_center'
            ,title: '部门树'
            ,closable: false
            ,autoScroll: true

        }, {

             contentEl: 'viewport_center_help'
            ,title: '帮助'
            ,autoScroll: true

        }]

    })
	
	,
	init: function(){
		
		console.log('viewport init is starting ... ');

		// 页面布局
	    var v = new Ext.Viewport({ 
	    	 layout: 'border'
	    	,items: [
	    	    	 this.north
	    	     	,this.south
	    	     	,this.east
	    	     	,this.west
	    	     	,this.center
    	     ]
	    });
	}
	
};