Pass value to view on create

Question

Im trying to make a custom view and pass a value when I add it in another item using the xtype. It looks simple because I dont need to use stores or anything like that, its just static values but I cant achieve it :(

My idea is to place this in a component (the parent of my custom component):

...
items: [{
    xtype: 'myNewComponent',
    car: 'Renault'
}]
...

And then in my custom component get the value:

Ext.define('myNewComponent', {
    extend: 'Ext.Panel',
    xtype: 'myNewComponent',
    config: {
        items: [{
            html: 'This is my car: ' + this.config.car
        }]
    }
});

I think that Im not understanding something, could you help me?

Thanks!

score 1 · Accepted Answer · answered Jan 23 '13 at 20:46

There are 2 things you need to do.

Firstly, you must create a the new config in your custom component. Doing this is as simple as adding it into the config object of your class:

Ext.define('myNewComponent', {
    extend: 'Ext.Panel',
    xtype: 'myNewComponent',
    config: {
        car: null
    }
});

null here is merely the default value if you do not change it when you create the component.

Now we want to use this new config. What you have done will not work as the scope of this.config.car is the DOM window. You will need to create the item using a function of your class. You can achieve this by using the new updateCar method of your new car config. This method is called anytime you update that config. In your case, that is when you first create your custom component.

Ext.define('myNewComponent', {
    ...

    updateCar: function(newCar) {
        this.add({
            html: 'This is my car: ' + newCar
        });
    }
});

You can find out more about how the config system works here: http://docs.sencha.com/touch/2-1/#!/guide/class_system

Pass value to view on create

1 Answers1