Shopware backend enhance category with ExtJs - extjs

Question

I'm stuck in the development of an extension for Shopware.
I want to extend the administration of categories in the correct way.
To achieve that created plugin (legacy). This plugins appends the first tab within a category.
//{block name="backend/category/view/tabs/settings" append}
This is done to add a fieldset with a dropdown. The file looks like this:
//{block name="backend/category/view/tabs/settings" append}
Ext.define('Shopware.apps.HaendlerbundFoobarCategories.view.category.tabs.settings', {
override:'Shopware.apps.Category.view.category.tabs.Settings',
getItems: function() {
var me = this;
var items = me.callParent(arguments);
me.FooBar = me.getFooBarSection();
items.push(me.FooBar);
return items;
},
getFooBarSection : function()
{
var me = this;
return Ext.create('Ext.form.FieldSet',{
title: 'FooBar Verlinkung',
anchor: '100%',
defaults : me.defaults,
disabled : false,
items : me.getDropdowns()
});
},
getDropdowns:function(){
var me = this;
return me.templateComboBox = Ext.create('Ext.form.field.ComboBox', {
xtype:'combobox',
fieldLabel: 'FooBar Product',
store: me.fooBarProducts.load(),
labelWidth: 155,
valueField: 'id',
displayField:'title',
editable: true,
allowBlank:true,
name:'fbproduct'
});
}
});
//{/block}
The main problem I suspect is the store. Leaving it like this I get an JS
error Cannot read property 'load' of undefined. without the .load() there is no error, but I also can't determine if the store got loaded.
The store file itself is in Views/backend/haendlerbund_foobar_categories/store/foo_bar_products
and the content of the file is:
//{block name="backend/haendlerbund_foobar_categories/store/fooBarProducts"}
Ext.define('Shopware.apps.HaendlerbundFoobarCategories.store.fooBarProducts', {
//...
model: 'Shopware.apps.HaendlerbundFoobarCategories.model.fooBarProducts',
proxy : {
type : 'ajax',
/**
* Configure the url mapping for the different
* store operations based on
* #object
*/
api : {
read : '{url controller=HaendlerbundFoobarCategories action=getProducts}'
},
/**
* Configure the data reader
* #object
*/
reader : {
type : 'json',
root: 'data'
}
}
});
//{/block}
EDIT:
For further context, this is the current state of the model the store references.
Ext.define('Shopware.apps.HaendlerbundFoobarCategories.model.fooBarProducts', {
extend: 'Ext.data.Model',
/**
* If the name of the field is 'id' extjs assumes automatically that
* this field is an unique identifier.
* #integer
*/
idProperty : 'id',
fields:[
{ name : 'id', type: 'int' },
{ name : 'ffid', type: 'bigint' },
{ name : 'title', type: 'string' },
{ name : 'description', type: 'string' },
{ name : 'price', type: 'decimal' },
{ name : 'vat', type: 'decimal' },
{ name : 'image', type: 'text' },
{ name : 'active', type: 'boolean' },
{ name : 'createdAt', type: 'datetime' },
{ name : 'modfiedAt', type: 'datetime' }
],
/*associations: [
{
relation: 'OneToMany',
storeClass: 'Shopware.apps.HaendlerbundFoobarCategories.store.fooBarProducts',
loadOnDemand: true,
type: 'hasMany',
model: 'Shopware.apps.HaendlerbundFooBarCategories.model.fooBarProducts',
name: 'getCategories',
associationKey: 'categories'
},
]*/
});
And the php controller which the store references as well has the following content:
<?php
class Shopware_Controllers_Backend_HaendlerbundFoobarCategories extends Shopware_Controllers_Backend_Application
{
protected $model = 'Shopware\CustomModels\Product\FFProduct';
protected $alias = 'ffproducts';
protected function getListQuery()
{
$builder = parent::getListQuery();
return $builder;
}
protected function getDetailQuery($id)
{
$builder = parent::getDetailQuery($id);
return $builder;
}
protected function getAdditionalDetailData(array $data)
{
return $data;
}
public function getProducts(){
$builder = $this->getManager()->createQueryBuilder();
$builder->select('*')
->from($model, $alias);
$data['id'] = 1;
$data['ffid'] = 1;
$data['title'] = 'lorem ipsum';
$this->view()->assign([
'success' => true,
'data' => $data,
'total' => 1
]);
}
}
It should return some dummy data for now.
I fail to solve the problem. As any documentation I was able to find was either focused on creating a separate component of changing an existing field. I suspect that I'm in the wrong scope or have a namespacing error or something.
Any help is greatly appreciated.

Answer 1

Your problem is the store assigning to combobox
this line of code isn't correct:
store: me.fooBarProducts.load(),
Usually a store should be only connected to a combobox like this:
store:'fooBarProducts'
Heres a fiddle to show you:
https://fiddle.sencha.com/#view/editor&fiddle/1kqj
Ext.application({
name : 'Fiddle',
launch : function() {
var yourStore=Ext.create('Ext.data.Store',{
fields:[{
name:'text'
},{
name:'value'
}],
data:[
{text:'test1',value:'testVal1'},
{text:'test2',value:'testVal2'},
{text:'test3',value:'testVal3'}
]
});
Ext.create({
xtype:'window',
width:300,
height:200,
items:[{
xtype:'combo',
displayField:'text',
valueField:'value',
store:yourStore
},{
xtype:'combo',
displayField:'text',
valueField:'value',
store:yourStore
}]
}).show();
}
});
have also a look here: http://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html
for a combobox example
and here to store declaration:
http://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html
To load your store, you should call the store load out of combo declaration

Answer 2

If you use
store: somestore.load()
the combobox will bind to the value returned by load. The load function does not return anything, so the combo's store config is set to undefined.
What you want to do may be
me.fooBarProducts.load();
return me.templateComboBox = Ext.create('Ext.form.field.ComboBox', {
xtype:'combobox',
fieldLabel: 'FooBar Product',
store: me.fooBarProducts,
labelWidth: 155,
valueField: 'id',
displayField:'title',
editable: true,
allowBlank:true,
name:'fbproduct'
});