Ext viewport的渲染

1.在app.js里创建

	Ext.application({

	    name: 'MySecurity',

	    extend: 'MySecurity.Application',

	    requires: [

	        'MySecurity.view.Viewport'

	    ],

	    //添加mainView 会自动创建 viewport

	    mainView: 'MySecurity.view.Viewport'

	});

2.在Application.js里创建

• 在Application渲染viewport可以先处理一些其他操作再渲染界面

例如先获取某些数据，或者先执行一些其他操作，弹出窗口,显示loading等

	Ext.define('MySecurity.Application', {

	    extend: 'Ext.app.Application',

	    requires:[

	        'Ext.form.*',

	        'Ext.grid.*'

	    ],

	    name: 'MySecurity',

	    stores: [

	        // TODO: add global / shared stores here

	        //'user.UserStore'

	    ],

	    launch: function () {

	        // TODO - Launch the application

	    },

	    init: function(){

	        myApp = this;

	        //创建Viewport

	        Ext.create('MySecurity.view.Viewport');

	    },

	    onAppUpdate: function () {

	        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',

	            function (choice) {

	                if (choice === 'yes') {

	                    window.location.reload();

	                }

	            }

	        );

	    }

	});

3.viewport

继承 Ext.container.Viewport

	Ext.define('MySecurity.view.Viewport', {

	    extend: 'Ext.container.Viewport',

	    requires:[

	        'MySecurity.view.main.MainHeader',

	        'MySecurity.view.main.MainTabPanel'

	    ],

	    layout:{

	    	type:'vbox',

	    	align :'stretch'

	    },

	    controller: 'viewportcontroller',

	    viewModel: {

	        type: 'mainviewport'

	    },

	    items: [{

	        xtype:'mainHeader',

	    	height:50

	    },{

	    	xtype:'mainTabPanel',

	    	flex:1

	    },{

	        xtype: 'tbtext',

	        cls: 'top-user-name',

	        bind: {

	            text: '{userAccess.username}'

	        }

	    }]

	});