JSFiddle - React, Tailwind, and code Playground

by klarstil

HTML

Hier ein kleines Beispiel, wie man in Shopware 4.1 einen Tab basierend auf der Artikel-ID aktiviert bzw. deaktiviert.

JavaScript

// View
Ext.define('Shopware.apps.Article.view.detail.MyPluginWindow', {
    override: 'Shopware.apps.Article.view.detail.Window',

    /**
     * Dient zur Registrierung des Tabs
     */
    createMainTabPanel: function() {
        var me = this, result;
        result = me.callParent(arguments);

        me.registerAdditionalTab({
            title: 'My Plugin Tab',
            contentFn: me.createMyPluginTabContent,
            articleChangeFn: me.onArticleChangeMyPlugin,
            scope: me
        });

        return result;
    },

    /**
     * Wird zur Erstellung des Tab-Contents aufgerufen, hier die Basis
     * Initialisierung vornehmen.
     *
     * @param article
     * @param stores
     * @param createdTab
     */
    createMyPluginTabContent: function(article, stores, createdTab) {
        var me = this;
        me.createdTab = createdTab;
        me.createdTab.tab.setDisabled((me.article.get('id') === null));
    },

    /**
     * Wird aufgerufen, wenn der Kunde die Split-View Ansicht aktiviert hat
     * und einen Artikel wechselt.
     * Hier muss der extraParam am Store geändert werden.
     */
    onArticleChangeMyPlugin: function(tab) {
        var me = this;

        me.createdTab.tab.setDisabled((me.article.get('id') === null));

        // `extraParam` ändern
    }
});

// Controller
Ext.define('Shopware.apps.Article.controller.Detail.MyPlugin', {
    override: 'Shopware.apps.Article.controller.Detail',

    /**
     * Wird aufgerufen, wenn der Artikel gespeichert wurde. Hier muss der
     * der extraParam am Store gesetzt werden.
     * @param article
     */
    reconfigureAssociationComponents: function(article) {
        var me = this,
            mainWindow = me.getMainWindow();

        me.callParent(arguments);

        mainWindow.createdTab.tab.setDisabled(article.get('id') === null);
    }

});