Передайте значение для просмотра при создании

Question

Я пытаюсь сделать пользовательский вид и передать значение, когда я добавляю его в другой элемент, используя xtype. Это выглядит просто, потому что мне не нужно использовать магазины или что-то подобное, это просто статические значения, но я не могу этого достичь:(

Моя идея состоит в том, чтобы поместить это в компонент (родительский компонент моего пользовательского компонента):

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

И тогда в моем пользовательском компоненте получить значение:

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

Я думаю, что я чего-то не понимаю, не могли бы вы мне помочь?

Спасибо!

Answer 1

Есть 2 вещи, которые вам нужно сделать.

Во-первых, вы должны создать новый конфиг в вашем пользовательском компоненте. Сделать это так же просто, как добавить его в config объект вашего класса:

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

null здесь просто значение по умолчанию, если вы не меняете его при создании компонента.

Теперь мы хотим использовать этот новый конфиг. То, что вы сделали, не будет работать как сфера this.config.car это окно DOM. Вам нужно будет создать предмет, используя функцию вашего класса. Вы можете достичь этого с помощью нового updateCar метод вашего нового car конфигурации. Этот метод вызывается каждый раз, когда вы обновляете этот конфиг. В вашем случае это когда вы впервые создаете свой пользовательский компонент.

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

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

Вы можете узнать больше о том, как работает система конфигурации здесь: http://docs.sencha.com/touch/2-1/