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

    });

转载于:https://www.cnblogs.com/final-elysion/p/6112475.html