I am trying to create items inside a ponent 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);
    }
});

I am trying to create items inside a ponent 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);
    }
});

• javascript
• sencha-touch
• extjs
• sencha-touch-2

• If you really wanted to do this, you would do it in the constructor. It gets the config you pass to Ext.create() just link initComponent, so you could use the exact same code you are using above. But the question is; why would you want to do this? We wanted to make the config system as flexible as possible with 2.x, so we introduced that config block so you don't need initComponent anymore. In what situation can you not use use config? – rdougan Commented Mar 16, 2012 at 22:16
• Constructor has no arguments though, which is odd? The config inside Ext.define doesn't allow you to refer to this as the scope of a panel, meaning you have to define a controller just to do this.reset() on a form for example. Mitchell Simoens has something similar to what I am trying to do in his grid extensions ( I think ). github./mitchellsimoens/Ext.ux.touch.grid/blob/master/… but none of what he is doing can be found in the docs ( unless I am blind ). – Alex Commented Mar 17, 2012 at 14:27
• Another example off the top of my head would be to define a form that does an ajax call to get its config on init ( which is fun for forms ). – Alex Commented Mar 17, 2012 at 14:30
• Since you did technically point me in the right direction, your wele to claim the bounty on this. The fact that the config isn't passed to the constructor threw me off. – Alex Commented Mar 19, 2012 at 13:17
• I added a proper answer. constructor should pass the arguments; I added an example and tested it and it worked fine. – rdougan Commented Mar 19, 2012 at 23:31

4 Answers 4

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 ponent 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({
        ...
    });
}

you don't need to call initialize manually it is already done by constructor and when calling this function you can access items data using this.items and create panel items there

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    config: {
        items: []
    },

    initialize : function()
    {
        this.items = [Ext.create({
             xtype: 'textfield',
             name: 'Name',
             label: 'Name'
        })];

        this.callParent();
    }
});

Ext.application({
    viewport: {
        layout:'fit'        
    },
    launch: function(){
        Ext.Viewport.add(Ext.create('mobi.form.Login'));
    }
})

Use the following:

Ext.apply(this, {
    items: [
 .... 
    ]
});

Have you tried something similar to this? I'm just passing a config object to Ext.create, though I can't test it right now. See http://docs.sencha./touch/1-1/#!/api/Ext-method-create

Ext.Viewport.add(Ext.create(
    {
        xtype: 'mobi.form.Login',
        items: [ /*A list of items*/ ]
    }
));

You could stick this snippet in its own function as well, one that takes in items as a parameter. Hope this solves your problem!