Moin,
im Moment versuche ich eine erweiterte Version des Banner-Slider-Elements zu entwickelt. Die erweitere Version soll am Ende weitere Spalten zu jedem Banner speichern können. Dazu habe ich ein Plugin geschrieben, das die BannerSlider-Componente und das Bannerslider-Model erweitert. Die Banner-Auswahl funktioniert soweit und es wird auch die zusätzliche Spalte “Size” anzeigt, nur leider wird diese nicht mit abgespeichert. Jemand eine Idee? An irgendeiner Stelle wird wieder auf das alte Model zugegriffen, sodass nach dem Speichern das Feld “Size” nicht in der BannerStore-Variable vorhanden ist.
/**
* ExtJS Component for Media Widget Plugin
*/
Ext.define('Shopware.apps.Emotion.view.components.MasonryGalleryWidget', {
/**
* Extend from the base emotion component.
*/
extend: 'Shopware.apps.Emotion.view.components.BannerSlider',
/**
* Set the defined xtype of the component as the new widget alias.
*/
alias: 'widget.emotion-masonry-gallery',
/**
* Snippets for the component.
* @object
*/
snippets: {
'select_banner': '{s name=select_banner}Select banner(s){/s}',
'banner_administration': '{s name=banner_administration}Banner administration{/s}',
'path': '{s name=path}Image path{/s}',
'actions': '{s name=actions}Action(s){/s}',
'link': '{s name=link}Link{/s}',
'altText': '{s name=altText}Alternative text{/s}',
'title': '{s name=title}Title{/s}',
'size': '{s name=size}Größe{/s}',
banner_slider_title: '{s name=banner_slider_title}Title{/s}',
banner_slider_arrows: '{s name=banner_slider_arrows}Display arrows{/s}',
banner_slider_numbers: {
fieldLabel: '{s name=banner_slider_numbers/label}Display numbers{/s}',
supportText: '{s name=banner_slider_numbers/support}Please note that this setting only affects the "emotion" template.{/s}'
},
banner_slider_scrollspeed: '{s name=banner_slider_scrollspeed}Scroll speed{/s}',
banner_slider_rotation: '{s name=banner_slider_rotation}Rotate automatically{/s}',
banner_slider_rotatespeed: '{s name=banner_slider_rotatespeed}Rotation speed{/s}'
},
/**
* 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.mediaSelection = Ext.create('Shopware.form.field.MediaSelection', {
fieldLabel: me.snippets.select_banner,
labelWidth: 155,
albumId: -3,
listeners: {
scope: me,
selectMedia: me.onAddBannerToGrid
}
});
me.bannerStore = Ext.create('Ext.data.Store', {
fields: ['position', 'path', 'link', 'altText', 'title', 'mediaId', 'size']
});
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.mediaSelection, me.bannerGrid]
});
},
/**
* 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
}
}, {
dataIndex: 'size',
header: snippets.size,
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
}]
}];
},
/**
* 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.MasonryGalleryWidgetModel', {
position: count,
path: record.get('path'),
mediaId: record.get('id'),
link: record.get('link'),
altText: record.get('altText'),
title: record.get('title'),
size: record.get('size')
});
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);
},
});
Ext.define('Shopware.apps.Emotion.model.MasonryGalleryWidgetModel', {
/**
* Extends the standard Ext Model
* @string
*/
extend: 'Shopware.apps.Emotion.model.BannerSlider',
/**
* The fields used for this model
* @array
*/
fields: [
//{block name="backend/emotion/model/field/banner_slider"}{/block}
'position', 'path', 'mediaId', 'link', 'altText', 'title', 'size'
]
});
Beste Grüße,
Lasse
