Hallo zusammen,
ich versuche gerade ein Backend Plugin zu erstellen das Produktvorteile im Produkt->Resourcen Tab analog zu den Links hinzufügt. Meine Erfahrung mit ExtJS ist gelinde gesagt mäßig. Orientiert habe ich mich am Core Code für die Links selbst sowie dem digital publishing plugin.
Da Shopware die Links aber im Artikel selbst speichert konnten mir die Links hier nicht als vorlage dienen. Meine Felder werden angezeigt, nur die events funktionieren nicht und ich kann mir mangels ExtJs erfahrung keinen Reim machen wo nun der Fehler ist.
wird nun der php Controller im store über einen proxy angesteuert, oder (wie im digital publishing plugin) in einem eigenen controller ?
Ich habe hier glaube ich ein generelles Verständnisproblem diesbezüglich…
Mein Controller:
//{namespace name=backend/article/view/main}
//{block name="backend/article/detaildescriptionimage/controller/vorteile"}
Ext.define('Shopware.apps.detaildescriptionimage.controller.Main', {
extend: 'Enlight.app.Controller',
init: function() {
var me = this;
me.control({
'article-resources-vorteile': {
'addVorteile': me.onAddVorteile,
'removeVorteile': me.onRemoveVorteile,
'getListQuery': me.onGetListQuery
}
});
me.callParent(arguments);
},
onAddVorteile: function(tab,grid,form){
Ext.Ajax.request({
url: '{url module="backend" controller="DetailDescriptionImage" action="addVorteile"}',
method: 'POST',
params: {
'title': record.get('titel'),
'vorteil': form.get('vorteil')
},
success: function(response) {
alert(response);
}
});
},
onRemoveVorteile: function(tab,grid,form){
alert("remove");
},
onGetListQuery: function(tab,grid,form) {
alert("list");
}
});
//{/block}
Model:
//{namespace name=backend/article/view/main}
//{block name="backend/article/detaildescriptionimage/model/vorteile"}
Ext.define('Shopware.apps.Article.detaildescriptionimage.model.Vorteil', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'articleId', type: 'int' },
{ name: 'titel', type: 'string' },
{ name: 'vorteil', type: 'string' }
]
});
// {/block}
Store:
//{block name="backend/article/detaildescriptionimage/view/vorteile"}
Ext.define('Shopware.apps.Article.detaildescriptionimage.store.Vorteil',{
//extend: 'Shopware.store.Listing',
extend: 'Ext.data.Store',
model: 'Shopware.apps.Article.detaildescriptionimage.model.Vorteil',
configure: function(){
return {
controller: 'DetailDescriptionImage'
}
},
proxy: {
type: 'ajax',
url: '{url controller=DetailDescriptionImage action=getListQuery}',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
}
});
// {/block}
window:
//{namespace name=backend/article/view/main}
//{block name="backend/article/view/detail/window" append}
Ext.define('Shopware.apps.Article.detaildescriptionimage.view.detail.Window', {
override: 'Shopware.apps.Article.view.detail.Window',
createResourcesTab: function(){
var me = this;
var resourcesTab = me.callParent(arguments);
var vorteile = Ext.create('Shopware.apps.detaildescriptionimage.view.detail.Vorteile', {
article: me.article
});
resourcesTab.push(vorteile);
return resourcesTab;
}
});
//{/block}
app.js
//{block name="backend/article/application" append}
//{include file="backend/article/detaildescriptionimage/controller/vorteile.js"}
//{include file="backend/article/detaildescriptionimage/model/vorteile.js"}
//{include file="backend/article/detaildescriptionimage/store/vorteile.js"}
//{include file="backend/article/detaildescriptionimage/view/detail/vorteile.js"}
//{/block}
View:
//{namespace name=backend/article/view/main}
//{block name="backend/article/detaildescriptionimage/view/detail/vorteile"}
Ext.define('Shopware.apps.detaildescriptionimage.view.detail.Vorteile', {
/**
* Define that the billing field set is an extension of the Ext.form.FieldSet
* @string
*/
extend: 'Ext.form.FieldSet',
alias: 'widget.article-resources-vorteile',
/**
* Set css class for this component
* @string
*/
cls: Ext.baseCSSPrefix + 'article-resources-vorteile',
/**
* Contains all snippets for the view component
* @object
*/
snippets:{
title: '{s name=resources/vorteile/field_set}Vorteile{/s}',
notice: '{s name=resources/vorteile/notice}Produktvorteile hinzufügen{/s}',
titel: '{s name=resources/vorteile/titel}Titel{/s}',
vorteil: '{s name=resources/vorteile/vorteil}Vorteil{/s}',
button: '{s name=resources/vorteile/button}Vorteil hinzufügen{/s}',
grid: {
title: '{s name=resources/vorteile/grid/title}Angelegte Vorteile{/s}',
delete: '{s name=resources/vorteile/grid/delete}Vorteil entfernen{/s}',
}
},
initComponent: function () {
var me = this;
me.title = me.snippets.title;
me.items = me.createElements();
me.addEvents(
'addVorteile',
'removeVorteile'
);
me.callParent(arguments);
},
createElements: function() {
var me = this;
me.vorteileForm = me.createVorteileForm();
me.vorteileGrid = me.createVorteileGrid();
me.vorteileElements = Ext.create('Ext.container.Container', {
layout: 'column',
items: [
{
xtype: 'container',
columnWidth: 0.35,
margin: '0 20 0 0',
items: [me.vorteileForm]
}, {
xtype: 'container',
columnWidth: 0.65,
items: [me.vorteileGrid]
}
]
});
return [me.vorteileElements];
},
createVorteileForm: function() {
var me = this;
me.vorteileFormElements = Ext.create('Ext.form.Panel', {
layout: 'anchor',
border: false,
defaults: {
labelWidth: 155,
anchor: '100%'
},
items: [
{
xtype: 'container',
cls: Ext.baseCSSPrefix + 'global-notice-text',
html: me.snippets.notice
}, {
xtype: 'textfield',
name: 'titel',
fieldLabel: me.snippets.titel,
allowBlank: true
}, {
xtype: 'textfield',
name:'vorteil',
fieldLabel: me.snippets.vorteil,
allowBlank: false
}, {
xtype: 'button',
cls: 'small primary',
text: me.snippets.button,
anchor: 'auto',
margin: '0 0 0 160',
handler: function() {
me.fireEvent('addVorteile', me.vorteileGrid, me.vorteileForm);
}
}
]
});
return me.vorteileFormElements;
},
createVorteileGrid: function() {
var me = this;
me.vorteilStore = Ext.create('Shopware.apps.Article.detaildescriptionimage.store.Vorteil');
me.vorteileGridElements = Ext.create('Ext.grid.Panel', {
title: me.snippets.grid.title,
store: me.vorteilStore,
name: 'vorteil-listing',
height: 180,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
}),
{
ptype: 'grid-attributes',
table: 's_articles_information_attributes'
}
],
columns: [
{
header: me.snippets.name,
dataIndex: 'titel',
flex: 2,
editor: {
xtype: 'textfield'
}
}, {
header: me.snippets.vorteil,
dataIndex: 'vorteil',
flex: 2,
editor: {
xtype: 'textfield'
}
}, {
xtype: 'actioncolumn',
width: 30,
items: [
{
iconCls: 'sprite-minus-circle-frame',
tooltip: me.snippets.grid.delete,
handler: function (view, rowIndex, colIndex, item, opts, record) {
me.fireEvent('removeVorteile', me.vorteileGrid, record)
}
}
]
}
]
});
return me.vorteileGridElements;
}
});
//{/block}