我正在寻找一种获取事件处理程序方法内ExtJS类样式组件上的属性的参考的好方法。
背景：我尝试编写一个自己的Shopware 5.2购物世界小部件。基本上，它是一个高级滑块，每个幻灯片图像上都有单独的文本。为此，我已经定义了一个模型和存储，其中包含“真实”数据，这些数据随后将存储在数据库中。因此，这不是值得保存的任何数据，它是用于引用网格中正确项目的更多运行时数据。
这里的问题与经典的桌面应用程序问题相同：在事件处理程序（例如，事件处理程序）的同一类中获取对对象数据的引用。 G。单击处理程序以保存/修改显示的数据。基本上，事件处理程序（例如，点击处理程序）独立于该类的其余部分，并且它们通常也被类C语言编程为静态方法。
因此，我正在寻找一种不错的方式（好的方式=没有代码味道）来用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;">⚌</div>';
}
});
一些值得注意的价值指向它：
该代码最初是为Shopware编码手册中的另一个小部件创建的。我以此为起点，因为我只能使此小部件正常工作。因此，我删除了所有不需要的代码，并用自己的代码替换了。由于它仍在开发中，因此那里可能有来自原始小部件的一些反向引用或名称。一种是品牌名称“ Unsplash”。如我所说，我无法更改此设置以使小部件正常工作。当然，这将在开发周期结束之前进行更改。因此，没有真正的最终用户会在我的小部件中看到这些品牌名称。只是现在（我和我本地安装的开发环境）。
我还从Shopware的“横幅滑块”小部件中复制了很多功能逻辑，因为它的功能几乎与我需要的相同。因此，您可能会发现与原始小部件的相似之处。
除了我的观点2之外，工作代码示例也有所缩短。如果您对那些小的未显示功能感兴趣，可以在这里找到：https://github.com/shopware/shopware/blob/5.2/themes/Backend/ExtJs/backend/emotion/view/components/banner_slider.js
也可以在此处找到媒体窗口小部件。
我最初用作开始基础的小部件可以在以下位置找到：https://s3-eu-west-1.amazonaws.com/gxmedia.galileo-press.de/supplements/4185/4243_Zusatzmaterialien.zip
该小部件的各个作者（在第7节中）是DanielNögel（书籍作者），Shopware AG（该书的辅助工具）等等。实际上，没有为那些代码示例提供明确的许可。因为这是一本怎么做的书，所以我假设我有权在我的小部件中使用此代码。
编辑：这就是ExtJS对话框的实际外观：
最佳答案
您所有的事件处理程序都是常规方法，而不是静态方法，范围为me，它是组件本身。
这真的很容易：您可以扩展组件对象。因此，可以使用Unsplash.componentView.imgPos或me.imgPos代替this.imgPos（取决于是否在事件侦听器的开始处定义var me = this）。