# \[gelöst\] Backend extJS Problem

**URL:** <https://forum.shopware.com/t/gelost-backend-extjs-problem/8211>\
**Category:** Shopware 3.5\
**Tags:** programming\
**Created:** [29. August 2012 um 10:18 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211 "2012-08-29T10:18:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 10:18 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/1 "2012-08-29T10:18:22Z")

</div>

Hi, ich versuche gerade einen neuen Reiter in das Artikelfenster im Backend zu bekommen. Ich versuche das alte Plugin auf SW4 zu bekommen. Der Reiter an sich bekomme ich hin, aber mit dem Inhalt klappt es nicht: [code] /\*\* \* Creates the AreaCalc tab \* @return Ext.container.Container \*/ createAreaCalcTab: function() { var me = this; me.areacalcTreePanel = Ext.create(‘Ext.tree.TreePanel’, { id:‘feed-tree’, region: ‘west’, autoScroll: true, split: true, rootVisible: false, animate: false, collapsible: true, lines:false, title: ‘Navigation’, width: 120 }); //set root node me.root = new Tree.TreeNode({ text: ‘rootNode’, id: ‘1’ }); me.areacalcTreePanel.setRootNode(root); var nodes = [‘Material’, ‘Verarbeitung’]; var tpl = [‘material.php’, ‘verarbeitung.php’]; for(var i=0; i\<nodes.length i root.appendchild new ext.tree.treenode id: text: nodes template: tpl return ext.create layout: name: title: items: me.areacalctreepanel disabled: true fehlermeldung: e.mixins.elementct is undefined evtl. vermische ich hier auch alt mit neu und es kann nicht gehen. leider ist extjs gerade meine st will diesen alten code auf die neue basis bekommen: type=“text/javascript”\>

```
var myExt = function(){

var iFrameId = Ext.id();

//Blank Image

//Def. Variables
var root, tree, myTab;
var Tree = Ext.tree;

Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
	onRender : function(ct, position){
	  this.el = ct.createChild({tag: 'iframe', id: 'framepanel'+this.id, frameBorder: 0, src: this.url});
	}
}); 

return {
		openIFrameElement : function(page, openExtWin){
			if(page){
				var url=page+"?article=<?php echo $_GET["article"] ?>";
				Ext.get('framepanel'+iFrameId).dom.src = url;
			}
			if(openExtWin)
			{
				fenster = window.open (
					openExtWin,
					"NeuesFenster", // Name des neuen Fensters
					+"toolbar=0" // Toolbar
					+",location=1" // Adress-Leiste
					+",directories=0" // Zusatzleisten
					+",status=0" // Statusleiste
					+",menubar=0" // Menü
					+",scrollbars=1" // Scrollbars
					+",resizable=1" // Fenstergrösse veränderbar?
					+",width=800" // Fensterbreite in Pixeln
					+",height=600" // Fensterhöhe in Pixeln
				);
			}
				
		},
		init : function(){	
				//DEF TreePanel											
				var tree = new Tree.TreePanel({
					id:'feed-tree',
					region: 'west',
					autoScroll: true, 
					split: true,
					rootVisible: false,
					animate: false,
					collapsible: true,
					lines:false,
					title: 'Navigation',
					width: 120,
					listeners:{'click': function(e){
						if(e.attributes.template || e.attributes.openExtWin){
							myExt.openIFrameElement(e.attributes.template, e.attributes.openExtWin);
						}
					}}
				});
				
				//set root node
				root = new Tree.TreeNode({
					text: 'rootNode',
					id: '1'
				});
				
				tree.setRootNode(root);
				
				var nodes = ['Material', 'Verarbeitung'];
				var tpl = ['material.php', 'verarbeitung.php'];
				
				for(var i=0; i<nodes.length i root.appendchild new ext.tree.treenode id: text: nodes template: tpl iframe for viewport->CENTER
				var iframe = new Ext.ux.IFrameComponent({
					region:'center',
					split:true,
					animate:true,
					title: 'Test',

```

// width:700,  
// height:500,  
collapsible:true,  
id: iFrameId,  
url: ‘’,  
listeners: {‘render’: function(){  
myExt.openIFrameElement(tpl[0]);  
}}  
});

```
				//Set Viewport Options					
				var viewport = new Ext.Viewport({
					layout: 'border',
					items:[
						tree,
						iframe
					]
				});
			}
		}

```

}();

Ext.onReady(function(){   
myExt.init();  
});

[/code]

Hat mir jemand einen Tipp?

danke\</nodes.length\>\</nodes.length\>

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 10:30 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/2 "2012-08-29T10:30:03Z")

</div>

Hi ottscho, es freut uns dass du schon fleißig am umstellen der Plugins bist um den Community Store mit frischen Plugins zu versorgen =) Beim deinem Source Code ist mir folgendes aufgefallen: ` me.areacalcTreePanel = Ext.create('Ext.tree.TreePanel', { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;id:'feed-tree', &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;region: 'west', &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;autoScroll: true, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;split: true, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;rootVisible: false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;animate: false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;collapsible: true, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;lines:false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;title: 'Navigation', &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;width: 120 }); ` Der Ext.tree.TreePanel ist eine Komponente aus ExtJs 3.4. In ExtJs 4 ist dies nun der Ext.tree.Panel. Desweiteren würde ich dir empfehlen mit einem TreeStore zu arbeiten: ` var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [{ text: "detention", leaf: true }, { text: "homework", expanded: true, children: [{ text: "book report", leaf: true }, { text: "alegrbra", leaf: true}] }, { text: "buy lottery tickets", leaf: true } ] } }); Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody() }); `

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 10:43 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/3 "2012-08-29T10:43:45Z")

</div>

Hi, ok. Das erkärt einiges. Ich habe es nun zum schnellen Test so gemacht: ` var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [{ text: "detention", leaf: true }, { text: "homework", expanded: true, children: [{ text: "book report", leaf: true }, { text: "alegrbra", leaf: true}] }, { text: "buy lottery tickets", leaf: true } ] } }); var test = Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody() }); return Ext.create('Ext.container.Container', { layout: 'border', name: 'areacalc', title: 'AreaCalc', items: [me.test] }); ` Es klappt auch. Aber der Tree hängt unten links im Browser und nicht in meinem Fenster 😉 Siehe Screen. Danke dir :thumbup: :shopware:

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 10:52 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/4 "2012-08-29T10:52:18Z")

</div>

Hi, das wird denke ich an „renderTo: Ext.getBody()“ liegen. Nimm den Teil bitte einmal raus. Wenn du dann den tree.Panel direkt unter Container.items: [tree.Panel] packst und den Container als Tabreiter anzeigst sollte das funktionieren.

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 12:08 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/5 "2012-08-29T12:08:17Z")

</div>

ok super. Das war es schon mal. Nun passt es. Da ich meine alten Fenster gerne über Iframe einbinden will (was auch klappt) brauche ich aber um damit zu arbeiten die articleID. hast du mir noch einen Tipp, wie ich in der windows.js an die articleID komme? Oder steht die schon in einer Variabel bereit? Besten Dank

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 13:14 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/6 "2012-08-29T13:14:31Z")

</div>

Hi, da dies eine Erweiterung des Artikel Modules ist solltest du auch die SubApplication an dieser Stelle zur Verfügung haben. Prüfe doch bitte ob du per me.subApplication, Zugriff auf die Shopware.apps.Artilce Applikation hast. Sollte dies der Fall sein so hast du unter me.subApplication.article die kompletten aktuellen Artikel Daten zur Verfügung. Diese kannst du dann ins IFrame rein reichen.

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 13:34 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/7 "2012-08-29T13:34:52Z")

</div>

mhh, ich glaube ich stelle mich etwas doof an. Aber ich habe eben mit console.log(me.subApplication.article); unter Firebug nichts finden könnten.

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 13:39 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/8 "2012-08-29T13:39:58Z")

</div>

Hi, ich weiß leider nicht wo du mit deinem IFrame ansetzt. Machst du das als Extension des Artikel Modules? Also hängst du dich per Javascript zufällig im Artikel Module ein? Ansonsten probier bitte folgendes: ` Shopware.app.Application.subApplications ` In diesem Objekt stehen alle geöffneten SubApplicationen von Shopware zur Verfügung. Dort müsstest du auch die Shopware.apps.Article Application finden. Danach wieder der gleiche Weg wie vorher… .article =\> Artikel Daten.

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 14:07 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/9 "2012-08-29T14:07:23Z")

</div>

Ich quäle mich gerade durch Shopware.app.Application.subApplications im Firebug. Aber bis jetzt konnte ich noch keine ArticleID finden. Den Wert brauche ich direkt in detail/windows.js beim tab erzeugen. Ich werde mich früher oder später noch damit beschäftigen, so dass es ohne IFRAME geht und ich nur extJS nutze. Aber im Moment ist es einfach zu viel. ` createAreaCalcTab: function() { var me = this; var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [{ id: 1, text: "Material", template: 'material.php',leaf: true }, { id: 2, text: "Verarbeitung", template: 'verarbeitung.php',leaf: true }] } }); var test = Ext.create('Ext.tree.Panel', { title: 'Simple Tree', region: 'west', width: 200, height: 150, store: store, rootVisible: false }); var iframe = Ext.create('Ext.container.Container', { title: 'AreaCalc', html: '<ifr id="iframe-' + Ext.id() + '" border="0" src="'+%20'/engine/Shopware/Plugins/Community/Frontend/OttschoAreaCalculator/Views/backend/article/view/detail/verarbeitung.php'%20+%20'"></ifr>', }); return Ext.create('Ext.container.Container', { layout: 'border', name: 'areacalc', title: 'AreaCalc', items: [test, iframe] }); } `

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 14:09 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/10 "2012-08-29T14:09:50Z")

</div>

Hi, also wenn du mit “detail/windows.js” folgende Datei meinst: “templates/\_default/backend/article/view/detail/window.js” dann hast du dort unter me.article den aktuellen Artikel zur Verfügung. Hilfreich bei ExtJs “Problemen/Hindernissen” ist immer den Scope mit anzugeben dann wissen unsere Entwickler immer genau wo du dich gerade befindest und können dir so die best Möglichste Lösung vorschlagen. Mit freundlichen Grüßen Oliver Denter

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 14:34 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/11 "2012-08-29T14:34:02Z")

</div>

Hallo Oliver, danke für deine Geduld. Die Datei steht in meinem Plugin unter: /webseiten/shopwareV4/engine/Shopware/Plugins/Community/Frontend/OttschoAreaCalculator/Views/backend/article/view/detail/windows.js Diese Datei überschreibt die komplette original windows.js. Die ID des Artikels (s\_article.id DB) steht dann unter „me.article.data.id“

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 14:41 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/12 "2012-08-29T14:41:26Z")

</div>

Hi, hier ein kleiner Tipp unter Entwicklern: Unter me.article hast du das Shopware.apps.Article.model.Article zur Verfügung. Hier kannst du dann über me.article.get(‚id‘) sauber auf die Daten zugreifen. Ist noch ein bisschen besser als über das data property des models zu gehen. Sollte sich später mal die ExtJs API ändern (z.B. me.article.value.id) so würde mit „me.article.get()“ dein Plugin immer noch funktionieren 😉 Ich persönlich greife immer gerne über Funktionen auf Objekt Werte zu da diese meistens bei Major Releasen kompatibel gehalten werden Mit freundlichen Grüßen Oliver Denter

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 15:40 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/13 "2012-08-29T15:40:44Z")

</div>

Danke für den Tipp. Werde ich natürlich gleich ändern. Jetzt habe ich noch eine Kleinigeit. Ich finde nur nicht die richtige Datei. Ich brauche in meiner PHP welche per IFRAME nun eingebunden ist eine Ext.form.ComboBox Früher habe ich ja die JS und CSS Dateien direkt in der PHP eingebunden. Diese Dateien gibt es ja so nicht mehr. Bzw. nicht mehr an diesem Ort. Wo liegen die neuen Dateien. Damit ich diese einbinden kann? `<link rel="stylesheet" type="text/css" href="../../../vendor/ext/resources/css/ext-all.css"><script type="text/javascript" src="../../../vendor/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../../vendor/ext/ext-all.js"></script><link href="../../../backend/css/modules.css" rel="stylesheet" type="text/css"><link href="../../../backend/css/icons.css" rel="stylesheet" type="text/css"><link href="../../../backend/css/icons4.css" rel="stylesheet" type="text/css">` EDIT: ich glaube ich habe es engine/Library/ExtJs

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [29. August 2012 um 15:54 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/14 "2012-08-29T15:54:23Z")

</div>

[code]

{\* Meta-Tags \*} {block name=‚backend/article/meta\_tags‘}{\* Force the IE9 to always use the latest (e.g. bleeding egde) document and compability mode \*}{/block} {\* Page title \*}{block name=‚backend/article/title‘}{/block}{block name=„backend/article/css“}   
html, body {  
background: #ebedef !important;  
}  
{/block} {block name=„backend/article/favicon“} {/block} {block name=„backend/base/header/javascript“} {/block} [/code]

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 21:05 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/15 "2012-08-29T21:05:00Z")

</div>

Besten dank. Nun habe ich es fast komplett umgesetzt, dank deiner Hilfe. Einen kleinen Tipp brauche ich aber noch. Ich habe nun die comboBox in meiner eigenen PHP File integriert. Diese ist in einem FORM und wird versendet. Im alten Code hatte ich dann in der Post Variabel ‚Material‘, den Wert der Combobox stehen. Jetzt mit dem neuen Code ist die Variable leider NULL. ` var states = Ext.create('Ext.data.Store', { fields: ['material'], data : [{"material":"material1"}, {"material":"material2"}, {"material":"material3"}] }); // Create the combo box, attached to the states data store Ext.create('Ext.form.ComboBox', { renderTo: 'dropdown', fieldLabel: 'Material', hiddenName: 'material', store: states, displayField: 'material', typeAhead: true, mode: 'local', triggerAction: 'all', emptyText:'Bitte auswählen...', selectOnFocus:true }); ` Hast du hierzu noch eine Idee? Später super 🙂

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [29. August 2012 um 21:50 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/16 "2012-08-29T21:50:13Z")

</div>

ok, ich habe es. In extJS 4.0 muss da noch “name” rein. Jetzt gehts 🙂 ` Ext.create('Ext.form.ComboBox', { renderTo: 'dropdown', fieldLabel: 'Material', valueField: 'material', name: 'material', store: mat, displayField: 'material', typeAhead: true, mode: 'local', triggerAction: 'all', emptyText:'Bitte auswählen...', selectOnFocus:true }); `

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [30. August 2012 um 13:31 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/17 "2012-08-30T13:31:15Z")

</div>

Hi, jetzt habe ich nur noch das Porblem, dass ich nicht weiß wie ich zwischen den einzelnen Nodes des TreePanle wechsle bzw. das andere Iframe angezeigt wird. itemclick: function(index) { var record = store.getAt(index); console.log(record); } }, Leider bekomme ich keine Ausgabe im Firebug. Hier mein ganzer Code. Ich will zwischen den beiden Nodes Material und Verarbeitung wechseln können. So das jeweils das passende Iframe angezeigt wird. ` var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [{ id: 1, text: "Material", template: 'material.php',leaf: true }, { id: 2, text: "Verarbeitung", template: 'verarbeitung.php',leaf: true }] } }); var test = Ext.create('Ext.tree.Panel', { title: 'Simple Tree', region: 'west', width: 200, height: 150, store: store, itemclick: function(index) { var record = store.getAt(index); console.log(record); } }, rootVisible: false }); var iframe = Ext.create('Ext.container.Container', { title: 'AreaCalc', html: '<ifr id="iframe-' + Ext.id() + '" border="0" src="'+%20'/engine/Shopware/Plugins/Community/Frontend/OttschoAreaCalculator/Views/backend/article/view/detail/material.php?getArticleID='%20+%20me.article.data.id%20+'"></ifr>', }); return Ext.create('Ext.container.Container', { layout: 'border', name: 'areacalc', title: 'AreaCalc', items: [test, iframe] }); ` Wenn das noch klappt bin ich fertig 🙂

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [30. August 2012 um 13:38 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/18 "2012-08-30T13:38:33Z")

</div>

hi, hier die Doku für das ItemClick event des Tree.Panels. [http://docs.sencha.com/ext-js/4-1/#!/ap … -itemclick](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-event-itemclick) ExtJs hat ein wenig die APIs der Komponenten umgestellt. Meistens ist es so das der erste Parameter eines Events immer die Komponente des Events ist. Deine Listener müsste dann so aussehene: [quote] var tree = Ext.create(‘Ext.tree.Panel’, { … listeners: { itemclick: function(treePanel, record) console.log(treePanel) ///ausgabe deines Trees console.log(record) ////ausgabe des selektierten Records. } }) [/quote] Noch ein kleiner Tipp, ich würde folgendes Event verwenden: [http://docs.sencha.com/ext-js/4-1/#!/ap … tionchange](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-event-selectionchange) Sonst würde jedes mal wenn der Benutzer auf einen der Knoten klickt die Funktion ausgeführt werden obwohl dieser vielleicht auch schon ausgewählt ist. Mit freundlichen Grüßen Oliver Denter

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [30. August 2012 um 14:10 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/19 "2012-08-30T14:10:47Z")

</div>

Hi Oliver, danke für den Tipp mit dem Event selectionchange. Muss ich mir mal in Ruhe anschauen. In Sachen extJS habe ich noch viel Nachholbedarf. Jetzt muss ich nur noch den Wechsel des Iframes machen. Ich dachte ich gebe dies einfach neu Aus und rendere es auf das Alte. Ich bekomme keinen Fehler, aber es klappt auch nicht. Wahrscheinlich ist der Code auch total falsch… Wenn du mir hier noch eine Hilfestellung geben kannst, dann lass ich dich für die nächsten Tage/Wochen in Ruhe 🙂 ` createAreaCalcTab: function() { var me = this; var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [{ id: 1, text: "Material", template: 'Material.php',leaf: true }, { id: 2, text: "Verarbeitung", template: 'Verarbeitung.php',leaf: true }] } }); var test = Ext.create('Ext.tree.Panel', { title: 'Simple Tree', region: 'west', width: 200, height: 150, store: store, listeners: { itemclick: function(treePanel, record){ //console.log(treePanel); //console.log(record); var currentTpl = record.data.text; return Ext.create('Ext.container.Container', { title: 'AreaCalc', html: '<ifr id="iframe-' + Ext.id() + '" border="0" src="'+%20'/engine/Shopware/Plugins/Community/Frontend/OttschoAreaCalculator/Views/backend/article/view/detail/'%20+%20currentTpl%20+%20'.php?getArticleID='%20+%20me.article.data.id%20+'"></ifr>', renderTo: 'AreaCalcIframe' }); } }, rootVisible: false }); var iframe = Ext.create('Ext.container.Container', { id: 'AreaCalcIframe', title: 'AreaCalc', html: '<ifr id="iframe-' + Ext.id() + '" border="0" src="'+%20'/engine/Shopware/Plugins/Community/Frontend/OttschoAreaCalculator/Views/backend/article/view/detail/Material.php?getArticleID='%20+%20me.article.data.id%20+'"></ifr>', }); return Ext.create('Ext.container.Container', { layout: 'border', name: 'areacalc', title: 'AreaCalc', items: [test, iframe] }); } `

---

<div class="post-metadata">

**Author:** ![Oliver\_Skroblin](https://avatars.discourse-cdn.com/v4/letter/o/6bbea6/32.png) [@Oliver\_Skroblin](https://forum.shopware.com/u/Oliver_Skroblin)\
**Post date:** [30. August 2012 um 14:20 UTC](https://forum.shopware.com/t/gelost-backend-extjs-problem/8211/20 "2012-08-30T14:20:06Z")

</div>

Hi, in den ExtJs4 Events solltest du keine Komponenten zurück geben. Die Return values in den Events sind dafür gedacht Events abzubrechen oder fortfahren zu lassen. Wenn du z.B. in einem selectionChange Event eines Trees FALSE zurück gibst, wird zum Beispiel der Change abgebrochen und das vorherige Element wird deaktiviert. Ich würde dir Empfehlen mit einem Card Layout auf einem Container zu arbeiten. [http://docs.sencha.com/ext-js/4-1/#!/ap … ainer.Card](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Card) Das Card Layout ist im prinzip ein Unsichtbares Tab Panel bei dem die TabNavigation ausgeblendet wird. Ein Beispiel: ` var container = Ext.create('Ext.container.Container', { layout: 'card', activeItem: 0, items: [{ xtype: 'myiframe1' }, { xtype: 'myiframe2' },] }); container.setActiveItem(0); container.setActiveItem(1); ` So wird jetzt zuerst das myiframe1 (Was bei dir z.B. Material sein könnte angezeigt). Das andere IFrame wird erstmal ausgeblendet. Wenn du dann “container.setActiveItem(1);” ausführst wird das Material IFrame ausgblendet und das “Verarbeitung” Iframe wird angezeigt.