[gelöst] Backend extJS Problem

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>

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() });

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 :wink: Siehe Screen. Danke dir :thumbup: :shopware:

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.

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

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.

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.

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.

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] }); }

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

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“

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 :wink: 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

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

[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]

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 :slight_smile:

ok, ich habe es. In extJS 4.0 muss da noch “name” rein. Jetzt gehts :slight_smile: 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 });

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 :slight_smile:

hi, hier die Doku für das ItemClick event des Tree.Panels. http://docs.sencha.com/ext-js/4-1/#!/ap … -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 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

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 :slight_smile: 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] }); }

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 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.