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

    });