Question

I am trying to create items inside a component as it gets initialized, with a function.

Consider the following:

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    config:{    
        items: [{
        xtype: 'textfield',
        name: 'Name',
        label: 'Name'
        }]
});
Ext.application({
    viewport: {
        layout:'fit'        
    },
    launch: function(){
        Ext.Viewport.add(Ext.create('mobi.form.Login'));
    }
})

I am trying to get The mobi.form.login to generate its config from a function that runs on initialize ( or whatever I can use to over write the config I specify ).

I know Sencha touch 2 has the constructor, and initialize function, but both of them seem to have arguments=[] ( eg an empty array )

This is more or less how it would look if I was doing it in ExtJS 4.x:

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    initComponent:function(config){
        config=Ext.apply({}.config,{});//make sure config exists    
        config.items= [{
            xtype: 'textfield',
            name: 'Name',
            label: 'Name'
        }]
    Ext.apply(this, config);
    this.callParent(arguments);
    }
});

Answer 1

If you ever wanted to do this, you could use constructor or initialize.

Constructor you would use for synchronous logic which will be fast and you want to happen before the component is initialized. You can access the configuration through the constructors first argument:

Ext.define('MyComponent', {
    extend: 'Ext.Component',

    constructor: function(config) {
        console.log(config);

        this.callParent([config]);
    }
});

Ext.application({
    launch: function(){
        Ext.create('MyComponent', { test: 1 })

        // Will log out:
        // {
        //     test: 1
        // }
    }
});

Remember you will always need to callParent with the config/arguments within constructor.

In any other situation, you should use initialize which is called after all the config’s have been… initialized. 🙂 We use this a lot internally for adding listeners.

initialize: function() {
    this.on({
        ...
    });
}