Question

I have created a view like this

Ext.define('App.view.Message', {
    extend: 'Ext.Panel',
    alias: 'widget.message',
    config: {
        layout: 'vbox',
        bigText: 'big Text',
        smallText: 'small text',
        imageUrl: 'imageurl',
        oT: '',
        description: 'message description',

        items: [
            {
            flex: 3,
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    items: [
                        {
                            html: '<h3>' + this.getBigText() + '</h3>'
                        },
                        {
                            html: '<h5>' + this.getSmallText() + '</h5>'
                        }
                    ]
                },
                {
                    xtype: 'image',
                    src: this.getImageUrl(),
                    flex: 1
                }
            ]
        },
            {
            flex: 6,
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    flex:1,
                    html: '<h3>' + this.getBigText() + '</h3>'
                },
                {
                    flex:5,
                    html: '<p>'+this.getDescription()+'</p>'
                }
            ]
        },
            {
            flex: 1,
            xtype: 'button',
            text: this.getOT()
        }
        ]
    }
})

i need to access values that will be passed when this view is created (config values) while creating the view.
so statement this.getDescription(), this.getBigText() etc etc are generating errors..
what i want is tht the view should be rendered with the config values that i pass is when im creating the view..
what should i do?

Answer 1

When you are define and load a “View” file – browser go through each line. The “View” instance isn’t created at that time. So, naturally the this cannot be found there.

However, you can use “this” inside the initialize function. So, you can write your code like this:

Ext.define('App.view.Message', {
    extend: 'Ext.Panel',
    xtype: 'message',
    config: {
        layout: 'vbox',
        bigText: 'big Text',
        smallText: 'small text',
        imageUrl: 'imageurl',
        oT: '',
        description: 'message description'
    },

initialize : function(){
     this.add([
            {
            flex: 3,
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    items: [
                        {
                            html: '<h3>' + this.bigText + '</h3>'
                        },
                        {
                            html: '<h5>' + this.smallText + '</h5>'
                        }
                    ]
                },
                {
                    xtype: 'image',
                    src: this.imageUrl,
                    flex: 1
                }
            ]
        },
            {
            flex: 6,
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    flex:1,
                    html: '<h3>' + this.bigText + '</h3>'
                },
                {
                    flex:5,
                    html: '<p>'+ this.description +'</p>'
                }
            ]
        },
            {
            flex: 1,
            xtype: 'button',
            text: this.oT
        }
        ]);

        this.callParent(arguments);
}
});