Sencha Touch / ExtJS: как сохранить переменную для последующего использования?

Question

Возможно ли, чтобы один метод в классе сохранил значение, которое другой метод может использовать позже?

Например, вот фрагмент из одного из моих экземпляров Ext.Panel:

app.views.EstablishmentDetail = Ext.extend(Ext.Panel, {
dockedItems: [{
    xtype: 'toolbar',
    title: 'View establishment',
    items: [
        {
            text: 'Back',
            ui: 'back',
            listeners: {
                'tap': function () {
                    Ext.dispatch({
                        controller: app.controllers.establishments,
                        action: 'index',
                        animation: {type:'slide', direction:'right'}
                    });
                }
            }
        },
        {xtype:'spacer'},
        {
            id: 'Map',
            text: 'Map',
            ui: 'action',
            listeners: {
                'tap': function () {
                    Ext.dispatch({
                        controller: app.controllers.establishments,
                        action: 'showMap',
                        id: this.record.getId(),
                        data: this.record.data,
                        record: this.record
                    });
                }
            }
        }
    ]
}],
styleHtmlContent:true,
scroll: 'vertical',

Я бы хотел, чтобы в этом классе была переменная - назовите ее myVariable, которую я могу передать свойству в диспетчере, который вы видите выше, 'showMap'.(Я хотел бы инициализировать его значение из другого вызова метода.)

Но во всех примерах, которые я видел в ExtJS, когда вы создаете подкласс чего-то вроде Ext.Panel, кажется, что вы можете ссылаться только на pre-существующие свойства (например, «заголовок») или создавать новые функции.Существует ли механизм сохранения переменной во время одного вызова метода, а затем ее использования в другом методе?

Answer 1

Да, вы можете добавить любые свойства, которые вы хотите в подкласс.Единственная сложность в совместном использовании данных методами, которые вы делаете, заключается в том, что указатель this ссылается на элемент, а не на подкласс.

Я думаю, что проще всего переопределить метод initComponent, чтобы вы могли использовать замыкания для обмена переменными между вашими обработчиками, например:

app.views.EstablishmentDetail = Ext.extend(Ext.Panel, {
initComponent: function () {
    var me = this;  //me will always refer to the view instance
    me.myVariable = yourMethod();
    me.dockedItems = [
        ...same code as you had before {
        listeners: {
            'tap': function () {
                Ext.dispatch({
                    someProp: me.myVariable
                });
            }
        }
    }];

    //You have to remember to do this anytime you override the initComponent method!!!
    app.views.EstablishmentDetail.superclass.initComponent.apply(this, arguments);
}});

ИМХО, каждый раз, когда вы используетеЭтот указатель в вашем подклассе будет менее запутанным, если вы переместите свой код в initComponent и используете замыкания.Вам не нужно, но тогда вам придется перемещаться вверх / вниз по цепочке родительских / дочерних компонентов.

Надеюсь, это поможет

Answer 2

Хороший способ размещения переменных в классе - это использование метода Ext.apply.

Ext.apply(this, {
myVar1 : myVar1,
myProp1: myProp1,
})

Причина, по которой переменная не существует в вызове Dispatch, заключается в том, что она находится в неправильной области видимости. Область действия по умолчанию функции слушателя будет в этом случае панелью инструментов. Вы должны установить область для этого на слушателе.

Чтобы ответить на ваш вопрос, вы можете сделать что-то вроде этого:

initComponent: function(){
    Ext.apply(this, {
    dispatchAction : 'showMap'
    });
    app.views.EstablishmentDetail.superclass.initComponent.call(this);
}

...

listeners: {
                tap:{
                    fn : function () {
                    Ext.dispatch({
                        controller: app.controllers.establishments,
                        action: this.dispatchAction,
                        id: this.record.getId(),
                        data: this.record.data,
                        record: this.record
                    });
                }
                scope: this
            }
        }

Есть много допустимых способов использования объекта слушателей, и это один из них. Я предпочитаю использовать метод on / addListener.