What is the point of config property on components in ExtJS/Sencha Touch?

Question

Consider the code like this and notice the config property.

Ext.define('TouchTomatoes.view.WelcomeOverlay', {
    extend: 'Ext.Panel',
    xtype: "main",

    config: {
        cls: "welcomeOverlay",
        html: [
            "<div class='message'>",
                "<h2>Welcome to <em>Touch Tomatoes</em></h2>",
                "<p>Browse any of our lists by selecting a tab at the bottom, or swiping across the app. <br/>You can find a movie in our search section.</p>",
                "<div class='tap'>Tap anywhere to begin</div>",
            "</div>"
        ].join(""),
        hidden:true
    },

    initialize: function() {
        this.element.on({
            tap: {
                fn: function() {
                    this.hide();
                },
                single:true,
                scope:this
            }
        })
    }
});

Until now I would simply place config items directly into a class definition, and everything would work. Actually I was thinking that it is the only way to do it (since config property is not documented in API for example). Can anyone tell how is one way different from another?

The same thing goes for initialize method there, I would usually use initComponent for this, why so many alternative names and ways in ExtJS?

score 1 · Answer 1 · answered Oct 25 '14 at 11:59

ExtJS and Sencha Touch are different. Please try to ask one question for one platform.
Sencha Touch 1 and 2 are different.
read console texts: [DEPRECATE][App.view.Main#constructor] initComponent() is deprecated, please put your code inside initialize() instead
Ext.Class.config is in the API documentation. Look at the extend-tree on the right of each component so see where each component comes from. The documentation does not show all items from the parent item

There are alternative names and ways in Sencha Touch and ExtJS usually to keep the code downwards compatible. But there is only one way in the current version to go.

Make sure to always read the latest blog posts on how to handle things.

On the right there is a "Show" dropdown with checkboxes and the one with the label "Inherited" is checked for me. I think it was quite logical on my side to expect all available properties and methods to be listed, inherited or own. Other than that - a helpful answer. — jayarjo, Oct 25 '14 at 19:15

score 1 · Accepted Answer · answered Oct 25 '14 at 18:12

The config option should be used to create your own getters and setters for your custom properties. So let's say you added another property there like: type: 'userform'. After the panel creation process, you would have the getType and setType methods available to you for that panel.

What is the point of config property on components in ExtJS/Sencha Touch?

2 Answers2