Ext viewport的渲染

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}'
	        }
	    }]

	});