1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    85
    Vote Rating
    0
    martinrame is on a distinguished road

      0  

    Default Viewport's regions without xtype

    Viewport's regions without xtype


    Hi, by hand editing a Viewport config I can create this:

    https://github.com/leonardorame/Ext4...ki/screen1.png

    The code to do it is this:

    Code:
    Ext.define('DEMO.view.Viewport', {        extend: 'Ext.container.Viewport',
            layout: 'border',
            initComponent: function() {
                Ext.apply(this, {
                    items: [
                        {
                            region: 'north', 
                            html: '<h1 class="x-panel-header">Page Title</h1>'
                        },
                        {
                            region: 'center',
                            html: '<h1 class="x-panel-header">This is the center region.</h1>'
                        },
                        {
                            region: 'south', 
                            html: '<h1 class="x-panel-header">Page footer</h1>'
                        },
                    ]
                });
                this.callParent();
            }
        });
    Using Designer, I did try to do the same, but regions are configured as XType "container". How can I remove the xtype?.

    Here's the code generated by Designer.

    Code:
        Ext.define('MyApp.view.ui.MyViewport', {
            extend: 'Ext.container.Viewport',
    
    
            layout: {
                type: 'border'
            },
    
    
            initComponent: function() {
                var me = this;
    
    
                Ext.applyIf(me, {
                    items: [
                        {
                            xtype: 'container',
                            layout: {
                                type: 'fit'
                            },
                            region: 'center'
                        },
                        {
                            xtype: 'container',
                            height: 150,
                            html: '<h1 class="x-panel-header">Page Title</h1>',
                            region: 'north'
                        },
                        {
                            xtype: 'container',
                            height: 150,
                            html: '<h1 class="x-panel-header">Page Footer</h1>',
                            region: 'south'
                        }
                    ]
                });
    
    
                me.callParent(arguments);
            }
        });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,400
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The defaultType in most cases is panel. Designer explicitly sets the xtype configuration under all circumstances regardless of whether its needed or not.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1