Javascript 在ExtJS类样式组件的事件处理程序中寻找一种返回引用的好方法

我正在寻找一种在事件处理程序方法中获取ExtJS类样式组件的属性引用的好方法。 背景：我正在尝试编写自己的ShopWare5.2ShoppingWorlds小部件。基本上，它是一个高级滑块，每个幻灯片图像上都有单独的文本。为此，我已经定义了一个模型和存储，它保存“真实”数据，稍后将存储在数据库中。因此，这不是任何值得保存的数据，而是更多用于引用网格中正确项的运行时数据

这里的问题与经典的桌面应用程序问题相同：在事件处理程序中获取同一类中对象数据的引用，例如。G单击处理程序保存/修改显示的数据。基本上，事件处理程序（例如click处理程序）独立于类的其余部分，并且它们通常在类似C的编程语言中声明为静态方法

因此，我正在寻找一种很好的方法（niceway=无代码气味）来用JavaScript实现这一点。因为我是ExtJS新手，所以我可能不完全了解它。在Shopware中使用的过时的4.1版本也不容易找到解决方案和文档部分。我的意思是不在sencha，也不在Shopware devdocs

由于这更多的是一个ExtJS问题，而不是Shopware所能解决的问题，因此我希望在这里获得更广泛的开发者受众

好的，到目前为止，我的选择是：

非常糟糕：定义一个全局变量，它位于窗口范围内

也许没那么糟糕，但也不是最佳解决方案：为此创建一个ExtJS名称空间，并在其中存储所需的变量。这实际上是由我完成的，并且它是有效的（请参见下面的代码示例）

以下是我迄今为止编写的完整代码：

Ext.define('Shopware.apps.Emotion.view.components.Unsplash', {
    extend: 'Shopware.apps.Emotion.view.components.Base',
    alias: 'widget.emotion-components-unsplash',

    declareNsGlobals: function () {
        Ext.ns("Unsplash.componentView");
        Unsplash.componentView.imgPos = -1;
    },

    /**
     * Initialize the component.
     *
     * @public
     * @return void
     */
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.declareNsGlobals();

        // me.setDefaultValues();
        me.add(me.createBannerFieldset());
        me.initGridData();
        // me.refreshHiddenValue();
    },

    /**
     * Creates the fieldset which holds the banner administration. The method
     * also creates the banner store and registers the drag and drop plugin
     * for the grid.
     *
     * @public
     * @return [object] Ext.form.FieldSet
     */
    createBannerFieldset: function () {
        var me = this;

        me.slideEditorItem = me.getSlideEditorItem();

        me.mediaSelection = Ext.create('Shopware.form.field.MediaSelection', {
            fieldLabel: me.snippets.select_banner,
            labelWidth: 100,
            albumId: -3,
            listeners: {
                scope: me,
                selectMedia: me.onAddBannerToGrid
            }
        });

        me.bannerStore = Ext.create('Ext.data.Store', {
            fields: [ 'position', 'path', 'link', 'altText', 'title', 'mediaId', 'slideText' ]
        });

        me.ddGridPlugin = Ext.create('Ext.grid.plugin.DragDrop');

        me.cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2
        });

        me.bannerGrid = Ext.create('Ext.grid.Panel', {
            columns: me.createColumns(),
            autoScroll: true,
            store: me.bannerStore,
            height: 200,
            plugins: [ me.cellEditing ],
            viewConfig: {
                plugins: [ me.ddGridPlugin ],
                listeners: {
                    scope: me,
                    drop: me.onRepositionBanner
                }
            },
            listeners: {
                scope: me,
                edit: function () {
                    me.refreshHiddenValue();
                }
            }
        });

        return me.bannerFieldset = Ext.create('Ext.form.FieldSet', {
            title: me.snippets.banner_administration,
            layout: 'anchor',
            'defaults': { anchor: '100%' },
            items: [ me.slideEditorItem, me.mediaSelection, me.bannerGrid ]
        });
    },

    /**
     * Factory method for the TinyMCE form element creation.
     *
     * @returns {Shopware.form.field.TinyMCE}
     */
    getSlideEditorItem: function () {
        return Ext.create('Shopware.form.field.TinyMCE', {
            name: 'slide_editor',
            id: 'slide_editor',
            translatable: false,
            fieldLabel: 'Slide Text',
            labelWidth: 100
        });
    },

    /**
     * Helper method which creates the column model
     * for the banner administration grid panel.
     *
     * @public
     * @return [array] computed columns
     */
    createColumns: function () {
        var me = this, snippets = me.snippets;

        return [ {
            header: '⚌',
            width: 24,
            hideable: false,
            renderer: me.renderSorthandleColumn
        }, {
            dataIndex: 'path',
            header: snippets.path,
            flex: 1
        }, {
            dataIndex: 'link',
            header: snippets.link,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: true
            }
        }, {
            dataIndex: 'altText',
            header: snippets.altText,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: true
            }
        }, {
            dataIndex: 'title',
            header: snippets.title,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: true
            }
        }, {
            xtype: 'actioncolumn',
            header: snippets.actions,
            width: 60,
            items: [ {
                iconCls: 'sprite-minus-circle',
                action: 'delete-banner',
                scope: me,
                handler: me.onDeleteBanner
            }, {
                iconCls: 'sprite-pencil',
                action: 'editSlideTextWhatever',
                tooltip: "load slide text in editor and update it",
                scope: me,
                handler: me.onEditSlideText
            } ]
        } ];
    },

    /**
     * Refactor sthe mapping field in the global record
     * which contains all banner in the grid.
     *
     * Adds all banners to the banner administration grid
     * when the user opens the component.
     *
     * @return void
     */
    initGridData: function () {
        var me = this,
            elementStore = me.getSettings('record').get('data'), bannerSlider;

        // TODO: check if this below works?!
        Ext.each(elementStore, function (element) {
            if (element.key === 'banner_slider') {
                bannerSlider = element;
                return false;
            }
        });

        if (bannerSlider && bannerSlider.value) {
            Ext.each(bannerSlider.value, function (item) {
                me.bannerStore.add(Ext.create('Shopware.apps.Emotion.model.Unsplash', item));
            });
        }
    },

    /**
     * Event listener method which will be triggered when one (or more)
     * banner are added to the banner slider.
     *
     * Creates new models based on the selected banners and
     * assigns them to the banner store.
     *
     * @public
     * @event selectMedia
     * @param [object] field - Shopware.MediaManager.MediaSelection
     * @param [array] records - array of the selected media
     */
    onAddBannerToGrid: function (field, records) {
        var me = this, store = me.bannerStore;

        Ext.each(records, function (record) {
            var count = store.getCount();
            var model = Ext.create('Shopware.apps.Emotion.model.Unsplash', {
                position: count,
                path: record.get('path'),
                mediaId: record.get('id'),
                link: record.get('link'),
                altText: record.get('altText'),
                title: record.get('title'),
                slideText: record.get('slideText')
            });
            store.add(model);
        });

        // We need a defer due to early firing of the event
        Ext.defer(function () {
            me.mediaSelection.inputEl.dom.value = '';
            me.refreshHiddenValue();
        }, 10);

    },

    /**
     * Event listener method which will be triggered when the user
     * deletes a banner from banner administration grid panel.
     *
     * Removes the banner from the banner store.
     *
     * @event click#actioncolumn
     * @param [object] grid - Ext.grid.Panel
     * @param [integer] rowIndex - Index of the clicked row
     * @param [integer] colIndex - Index of the clicked column
     * @param [object] item - DOM node of the clicked row
     * @param [object] eOpts - additional event parameters
     * @param [object] record - Associated model of the clicked row
     */
    onDeleteBanner: function (grid, rowIndex, colIndex, item, eOpts, record) {
        var me = this;
        var store = grid.getStore();
        var globImgPos = Unsplash.componentView.imgPos;
        store.remove(record);
        console.log("Unsplash.componentView.imgPos", Unsplash.componentView.imgPos);
        console.log("record position:", record.get("position"));
        // console.log("eOpts scope imgPos", eOpts.scope);

        if (globImgPos > -1 && record.get("position") === globImgPos) {
            Ext.getCmp("slide_editor").setValue("", false);
        }
        me.refreshHiddenValue();
    },

    /**
     * Event listener method which will be triggered when the user
     * whishes to edit a banner slide text from banner administration grid panel.
     *
     * Removes the banner from the banner store.
     *
     * @event click#actioncolumn
     * @param [object] grid - Ext.grid.Panel
     * @param [integer] rowIndex - Index of the clicked row
     * @param [integer] colIndex - Index of the clicked column
     * @param [object] item - DOM node of the clicked row
     * @param [object] eOpts - additional event parameters
     * @param [object] record - Associated model of the clicked row
     */
    onEditSlideText: function (grid, rowIndex, colIndex, item, eOpts, record) {
        var me = this;
        // TODO: defer load and growl message on after done
        var htmlEditor = Ext.getCmp('slide_editor');
        Unsplash.componentView.imgPos = record.get("position");
        htmlEditor.setValue(record.get("slideText") + " behind that " + record.get("position"), false);
    },

    /**
     * Event listener method which will be fired when the user
     * repositions a banner through drag and drop.
     *
     * Sets the new position of the banner in the banner store
     * and saves the data to an hidden field.
     *
     * @public
     * @event drop
     * @return void
     */
    onRepositionBanner: function () {
        var me = this;

        var i = 0;
        globImgPos = Unsplash.componentView.imgPos;
        me.bannerStore.each(function (item) {
            // also update the imgPos to detect item deletion also right after repositioning, if there is one already defined
            if (globImgPos > -1 && globImgPos === item.get("position")) {
                Unsplash.componentView.imgPos = i;
            }

            item.set('position', i);
            i++;
        });
        me.refreshHiddenValue();
    },

    /**
     * Refreshes the mapping field in the model
     * which contains all banners in the grid.
     *
     * @public
     * @return void
     */
    refreshHiddenValue: function () {
        var me = this,
            store = me.bannerStore,
            cache = [];

        store.each(function (item) {
            cache.push(item.data);
        });
        var record = me.getSettings('record');
        record.set('mapping', cache);
    },

    /**
     * Renderer for sorthandle-column
     *
     * @param [string] value
     */
    renderSorthandleColumn: function () {
        return '<div style="cursor: move;">&#009868;</div>';
    }
});

Ext.define（'Shopware.apps.Emotion.view.components.Unsplash'{
扩展：“Shopware.apps.Emotion.view.components.Base”，
别名：“widget.emotion组件未Flash”，
declareNsGlobals:函数（）{
Ext.ns（“unslash.componentView”）；
Unsplash.componentView.imgPos=-1；
},
/**
*初始化组件。
*
*@公众
*@返回无效
*/
initComponent:函数（）{
var me=这个；
me.callParent（参数）；
me.declareNsGlobals（）；
//me.setDefaultValues（）；
添加（me.createBannerFieldset（））；
me.initGridData（）；
//me.refreshHiddenValue（）；
},
/**
*创建保存横幅管理的字段集。方法
*还创建横幅存储并注册拖放插件
*对于网格。
*
*@公众
*@return[object]Ext.form.FieldSet
*/
CreateBanerFieldSet:函数（）{
var me=这个；
me.slideEditorItem=me.getSlideEditorItem（）；
me.mediaSelection=Ext.create（'Shopware.form.field.mediaSelection'{
fieldLabel:me.snippets.select_banner，
标签宽度：100，
albumId:-3，
听众：{
范围：我，
选择媒体：me.onAddBannerToGrid
}
});
me.bannerStore=Ext.create（'Ext.data.Store'{
字段：[‘位置’、‘路径’、‘链接’、‘altText’、‘标题’、‘mediaId’、‘slideText’]
});
me.ddGridPlugin=Ext.create（'Ext.grid.plugin.DragDrop'）；
me.celleediting=Ext.create（'Ext.grid.plugin.RowEditing'{
单击编辑：2
});
me.bannerGrid=Ext.create（'Ext.grid.Panel'{
列：me.createColumns（），
autoScroll：是的，
商店：me.bannerStore，
身高：200，
插件：[me.cellbediting]，
视图配置：{
插件：[me.ddGridPlugin]，
听众：{
范围：我，
投下：我的旗帜
}
},
听众：{
范围：我，
编辑：函数（）{
me.refreshHiddenValue（）；
}
}
});
return me.bannerFieldset=Ext.create（'Ext.form.FieldSet'{
标题：me.snippets.banner_管理，
布局：“锚定”，
'defaults'：{anchor:'100%}，
items:[me.slideEditorItem，me.mediaSelection，me.bannerGrid]
});
},
/**
*创建TinyMCE表单元素的工厂方法。
*
*@returns{Shopware.form.field.TinyMCE}
*/
GetSlideEditor项：函数（）{
返回Ext.create（'Shopware.form.field.TinyMCE'{
名称：“幻灯片编辑器”，
id:“幻灯片编辑器”，
可译：错，
fieldLabel:“幻灯片文本”，
标签宽度：100
});
},
/**
*创建列模型的帮助器方法
*用于横幅管理网格面板。
*
*@公众
*@return[array]计算列
*/
createColumns:函数（）{
var me=this，snippets=me.snippets；
返回[{
标题：“⚌；”，
宽度：24，
可隐藏的：错误，
渲染器：me.renderSorthandleColumn
}, {
数据索引：“路径”，
标题：snippets.path，
弹性：1
}, {
数据索引：“链接”，
标题：snippets.link，
弹性：1，
编辑:{
xtype:'textfield'，
allowBlank：对
}
}, {
数据索引：“altText”，
标题：snippets.altText，
弹性：1，
编辑:{
xtype:'textfield'，
allowBlank：对
}
}, {
数据索引：“标题”，
标题：snippets.title，
弹性：1，
编辑:{
xtype:'textfield'，
允许
Ext.define('Shopware.apps.Emotion.view.components.Unsplash', {
    extend: 'Shopware.apps.Emotion.view.components.Base',
    alias: 'widget.emotion-components-unsplash',
    // [...]
    objRef: null,
    // [...]

initComponent: function () {
    objRef = this;
    // [...]
},

onEditSlideText: function (grid, rowIndex, colIndex, item, eOpts, record) {
    // TODO: defer load and growl message on after done
    var htmlEditor = Ext.getCmp('slide_editor');
    Unsplash.componentView.imgPos = record.get("position");
    htmlEditor.setValue(record.get("slideText"), false);

    objRef.setEditorButtonNumberVal(Unsplash.componentView.imgPos);
}

  me.add(me.createBannerFieldset.bind(me).call());

this.fctA = function() {
  var me = this;
  this.valA = true;
  this.valB = false;
  fctInsideA() {
      //here *this*  is relatate to fctInsideA not fctA
      me.fctC.bind(me).call();
  }
}

this.fctB = function() {
  var me = this;
  this.valA = false;
  this.valB = true;
  fctInsideB() { 
      //here *this*  is relatate to fctInsideB not fctB
      me.fctC.bind(me).call();
  }
}

this.fctC = function() {
  if(this.valA)
    alert("A context");

  if(this.valB)
    alert("B context);  

}