# Bestellungen: Details, Tab hinzufügen mit einem JS- "onAcitveTab"-Event ?

**URL:** https://forum.shopware.com/t/bestellungen-details-tab-hinzufugen-mit-einem-js-onacitvetab-event/34763
**Category:** Programmierung
**Created:** [24. Februar 2016 um 11:44 UTC](https://forum.shopware.com/t/bestellungen-details-tab-hinzufugen-mit-einem-js-onacitvetab-event/34763 "2016-02-24T11:44:27Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Klara](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@Klara](https://forum.shopware.com/u/Klara)
#### Post date: [24. Februar 2016 um 11:44 UTC](https://forum.shopware.com/t/bestellungen-details-tab-hinzufugen-mit-einem-js-onacitvetab-event/34763/1 "2016-02-24T11:44:27Z")

</div>

Hallo!

ich habe zu den Details einer Bestellung einen zusätzlichen Tab hinzugefügt. Dazu habe ich:&nbsp;

Die Windows.js erweitert:

//{block name=“backend/order/view/detail/window” append}  
//{namespace name=backend/order/view/smartpackaging/detail}  
//alert( ‘ok soweit’);

Ext.define(‘Shopware.apps.smartpackaging.order.detail.view.main.Window’, {  
&nbsp; &nbsp; override: ‘Shopware.apps.Order.view.detail.Window’,  
&nbsp; &nbsp; createTabPanel: function () {

&nbsp; &nbsp; &nbsp; &nbsp; var me = this;  
&nbsp; &nbsp; &nbsp; &nbsp; var tabPanel = me.callParent(arguments);

&nbsp; &nbsp; &nbsp; &nbsp; html = true;  
&nbsp; &nbsp; &nbsp; &nbsp; htmlToShow = me.updateTab();

&nbsp; &nbsp; &nbsp; &nbsp; if(html !== false){  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabPanel.add(Ext.create(‘Shopware.apps.smartpackaging.view.main.Panel’, {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: ‘Smartes Paket ¯\_(ツ)\_/¯’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: ‘smaTab’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; historyStore: me.historyStore,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; record: me.record,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orderStatusStore: me.orderStatusStore,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paymentStatusStore: &nbsp;me.paymentStatusStore,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; smartPackageHtml: htmlToShow,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; logo : “none”  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }));  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp; return tabPanel;  
&nbsp; &nbsp; },  
&nbsp; &nbsp; updateTab: function(){  
&nbsp; &nbsp; &nbsp; &nbsp; alert(“updateTab”);  
&nbsp; &nbsp; &nbsp; &nbsp; var id = this.record.get(‘id’);  
&nbsp; &nbsp; &nbsp; &nbsp; var result = false;  
&nbsp; &nbsp; &nbsp; &nbsp; Ext.Ajax.request({  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: ‘{url controller=Smartpackaging action=getSmartPackages}’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method:‘POST’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async:false,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; params: {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orderId:id  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response){  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp; });  
&nbsp; &nbsp; &nbsp; &nbsp; return “this is a test!”;  
&nbsp; &nbsp; }

});  
//{/block}

&nbsp;

und ein Lade ein Panel in einer eigenen App:

//{namespace name=backend/order/view/smartpackaging/detail}  
Ext.require([  
&nbsp; &nbsp; ‘Ext.grid.\*’,  
&nbsp; &nbsp; ‘Ext.data.\*’,  
&nbsp; &nbsp; ‘Ext.panel.\*’  
]);

//{block name=“backend/order/view/detail/smartpackaging”}  
Ext.define(‘Shopware.apps.smartpackaging.view.main.Panel’, {  
&nbsp; &nbsp; /\*\*  
&nbsp; &nbsp; &nbsp;\* Define that the additional information is an Ext.panel.Panel extension  
&nbsp; &nbsp; &nbsp;\* @string  
&nbsp; &nbsp; &nbsp;\*/  
&nbsp; &nbsp; extend: ‘Ext.form.Panel’,  
&nbsp; &nbsp; autoScroll: true,  
&nbsp; &nbsp; initComponent: function() {  
&nbsp; &nbsp; &nbsp; &nbsp; alert(“panel.js”);  
&nbsp; &nbsp; &nbsp; &nbsp; me = this;  
&nbsp; &nbsp; &nbsp; &nbsp; me.items = [  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ext.create(‘Ext.container.Container’, {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: ‘auto’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 250,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layout: {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: ‘hbox’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align: ‘stretch’  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaults: {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: ‘10 0’  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: [  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ext.create(‘Ext.panel.Panel’, {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: ‘auto’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 250,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: “Pakete zu versenden:”,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bodyPadding: 10,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 1,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paddingRight: 5,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: [  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xtype: ‘panel’,  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html: this.smartPackageHtml  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })

&nbsp; &nbsp; &nbsp; &nbsp; ];  
&nbsp; &nbsp; &nbsp; &nbsp; this.callParent(arguments);  
&nbsp; &nbsp; }  
});  
//{/block}

Die Application sieht momentan so aus:

&nbsp;

//{block name=“backend/order/application” append}  
&nbsp; &nbsp; alert(“11”);  
&nbsp; &nbsp; /\*\*  
&nbsp; &nbsp; &nbsp;\* Views  
&nbsp; &nbsp; &nbsp;\*/  
&nbsp; &nbsp; //{include file=“backend/order/view/detail/smart-tab/window.js”}  
&nbsp; &nbsp; //{include file=“backend/order/view/detail/smart-tab/panel.js”}  
//{/block}

&nbsp;

**Mein Problem ist, der Tab muss&nbsp;sich aktualisieren sobald er aktiv wird, da ich den Status&nbsp;von geänderten Bestellpositonen für mein Plugin brauche.**

**Hat jemand eine Idee wie ich per EXTJs hier einen event einfügen kann, der mir einen Ajax-Aufruf verschickt?**

HIIILLLFEEEEEEEE 🙂

&nbsp;

LG&nbsp;

&nbsp;

&nbsp;

&nbsp;