ExtJS - Hinzufügen/Bearbeiten/Löschen in der Detail View

Shopware 5 Programmierung
1

Hallo liebe Leute,

ich habe mit Hilfe des DevDocs Tutorials für Backend Erweiterung mein Backend schon teils erfolgreich erweitert.
Ich lasse mir dabei Datensätze mit einem Grid Panel anzeigen und in der dazugehörigen Detail View ist ein weiteres Grid Panel welches den Inhalt einer OneToMany Verknüpfung anzeigt. Mir wird alles richtig angezeigt und ich kann die Einträge des Grid Panels in der Main View beliebig editieren. Das Löschen, Speichern und Hinzufügen von Einträgen im Grid Panel der Detail View tut jedoch gar nichts.

Ich hab bis jetzt nur den Inhalt der Tutorials abgearbeitet und da dieses leider nicht ganz fehler- und lückenfrei ist stell ich mir jetzt eben die Frage ob das überhaupt schon funktionieren kann oder ob ich für die Detail View wieder eine Detail View anlegen muss (würd mir sinnvoll erscheinen).

Bin praktisch neu in ExtJS und mir raucht schon der Schädel davon, darum vielen Dank für Hinweise wie ich weiter vorgehen soll.

Martin

2

Hey martin,

du willst wahrscheinlich die Einträge direkt aus dem Grid heraus löschen über das Action Column wenn ich das richtig verstanden habe?

Ein allgemeiner Tipp: Wenn du mit ExtJS arbeitest kannst du dir die bestehenden Komponenten von Shopware anschauen da findest du für jeden Anwendungsfall eine Lösung :wink:

Am besten wäre es wenn du ein paar Codeauszüge hier reinpostet dann könnte ich dir schnell helfen :wink:

So kann ich nur sagen das du dich auf die Click-Events der Buttons registrieren musst und dann dementsprechend einen Eintrag aus dem Store des Grids entfernen / hinzufügen / bearbeiten etc.
Damit die Daten auch auf dem Server gelöscht werden musst store.sync() aufrufen. 

Grüße,
Simon

1 „Gefällt mir“
3

Hallo Simon,

du willst wahrscheinlich die Einträge direkt aus dem Grid heraus löschen über das Action Column wenn ich das richtig verstanden habe?

Ja genau. Ich arbeite schon mit den Komponenten von Shopware,  so wie hier beschrieben https://developers.shopware.com/developers-guide/backend-components/associations/ und da sind die Einträge fürs Löschen und Editieren im Action Column ja automatisch vorhanden. Ebenso der Button fürs Hinzufügen in der Toolbar. Mir ist jedoch noch nicht ganz klar was im Hintergrund alles abläuft und was die Shopware Komponenten davon schon übernehmen.

Wie schon gesagt, ich bin noch Frischling in ExtJS und der Knopf ist mir noch nicht ganz aufgegangen, vermutlich ist mein Problem also ein sehr Grundsätzliches :slight_smile:

Hier nun etwas Code, ich poste mal einiges, sollte was fehlen liefere ich natürlich gerne nach :wink:

Die DetailView um die es sich handelt:

Ext.define('Shopware.apps.KommunenAdministration.view.detail.Bonus', {
    extend: 'Shopware.grid.Panel',
    alias: 'widget.shopware-kommune-bonus-grid',
    title: 'Bonus',
    height: 250
});

Der dazugehörige Store:

Ext.define('Shopware.apps.KommunenAdministration.store.Bonus', {
    extend: 'Shopware.store.Association',
    model: 'Shopware.apps.KommunenAdministration.model.Bonus',
    configure: function() {
        return {
            controller: 'KommunenAdministration'
        };
    }
});

Und das dazugehörige Model:

Ext.define('Shopware.apps.KommunenAdministration.model.Bonus', {
    extend: 'Shopware.data.Model',

    configure: function() {
        return {
            controller: 'KommunenAdministration',
            listing: 'Shopware.apps.KommunenAdministration.view.detail.Bonus'
        };
    },

    fields: [
        { name: 'id', type: 'int' },
        { name: 'kommuneId', type: 'int' },
        { name: 'active', type: 'boolean' },
        { name: 'datum', type: 'date' },
        { name: 'label', type: 'string' },
        { name: 'value', type: 'int' }
    ]
});

Hier noch die main.js

Ext.define('Shopware.apps.KommunenAdministration.controller.Main', {
    extend: 'Enlight.app.Controller',

    init: function() {
        var me = this;
        me.mainWindow = me.getView('list.Window').create({ }).show();
    }
});

Und die app.js

Ext.define('Shopware.apps.KommunenAdministration', {
    extend: 'Enlight.app.SubApplication',

    name:'Shopware.apps.KommunenAdministration',

    loadPath: '{url action=load}',
    bulkLoad: true,

    controllers: ['Main'],

    views: [
        'list.Window',
        'list.Kommune',

        'detail.Window',
        'detail.Kommune',
        'detail.Bonus',
    ],

    models: ['Kommune', 'Bonus'],
    stores: ['Kommune', 'Bonus'],

    launch: function() {
        return this.getController('Main').mainWindow;
    }
});

Finally der Controller:

use Shopware\CustomModels\Kommunen\Kommune;
use Shopware\CustomModels\Kommunen\Bonus;

class Shopware_Controllers_Backend_KommunenAdministration extends Shopware_Controllers_Backend_Application
    {
        protected $model = 'Shopware\CustomModels\Kommunen\Kommune';
        protected $alias = 'kommune';

        protected function getDetailQuery($id)
        {
            $builder = parent::getDetailQuery($id);
    
            $builder->leftJoin('kommune.bonus', 'bonus');
            $builder->addSelect(array('bonus'));
    
            return $builder;
        }
    
        protected function getAdditionalDetailData(array $data)
        {
            $data['bonus'] = array();
            return $data;
        }
    }

So wie ich das vermute übernehmen bislang die Shopware Komponenten das Registrieren der Events und die jeweiligen Aktionen. Wo und wie muss ich das nun vornehmen und gibt es dazu eine empfehlenswerte Dokumentation bzw Tutorials um mich grundsätzlich mit dem Thema zu beschäftigen oder muss ich mich durch die ExtJS Doku durchkämpfen?

Vielen Dank!