Add a tree to an Panel progamatically

[DeDarling]

Hi,

i have a Problem ..

I tried to add a tree panel to an Tab Panel ... but this dont works .. i gettng always the "undefined" Error :-(

My Page Layout

Page1.html
load script1.js
load script2.js
load script3.js

After loading the Page i have a button in Script1.js that should add an tree to a Panel in script2.js ...

But this dont works .. why ?
Error: 'accordion' is undefined

'accordion' is my Panel ...

Why cant i access a Panel (Script2.js) from script1.js after Page Loading !?

Script1.js


fisch(tree);

Script2.js


Ext.onReady(function(){

Ext.QuickTips.init();

//2 Spalten Layout
var formpanel_uebersicht = new Ext.FormPanel({
frame: true,
items: [{
// column layout with 2 columns
layout:'column',
defaults:{
columnWidth:0.5,
layout:'form',
border:false,
xtype:'panel',
bodyStyle:'padding:5px 5px 5px 5px'
},
items:[{
// left column
// defaults for fields
defaults:{
anchor:'100%'
},
items:[chart]
},{
// right column
// defaults for fields
defaults:{
anchor:'100%'
},
items: [detailView]
}]
}]
});

//Accordion View
var item1 = new Ext.Panel({
title: 'Übersicht',
items: [formpanel_uebersicht]
});
var item2 = new Ext.Panel({
title: 'Details',
html: '<empty panel>',
cls:'empty'
});
var accordion = new Ext.Panel({
margins:'5 0 5 5',
layout:'accordion',
items: [item1, item2]
});


// Layout der Seite
var viewpanel = new Ext.Viewport({
layout : "border",
items : [{
region : "center",
frame: true,
title : "",
items: [accordion]
},{
region : "north",
title : "Einstellungen",
height : 60,
collapsible : false,
titleCollapse : true,
items: [formpanel]
},{
region : "west",
title : "Merkmale",
width : 250,
collapsible : true,
titleCollapse : true ,
items: [tree]
},{
region : "east",
title : "Geografien",
width : 300,
collapsible : true,
titleCollapse : true,
items: [tree_geo]
}]
});
});

var fisch = function(item){

accordion.items.items[1].add(item);

}

[JanVenekamp]

You have declared the accordion variable in the nameless function used in Ext.onReady. It is not accessible outside this function.
Quick fix:



var accordion;

Ext.onReady(function(){
Ext.QuickTips.init();

//2 Spalten Layout
var formpanel_uebersicht = new Ext.FormPanel({

...

var item2 = new Ext.Panel({
title: 'Details',
html: '<empty panel>',
cls:'empty'
});
accordion = new Ext.Panel({
margins:'5 0 5 5',
layout:'accordion',
items: [item1, item2]
});

...
Google 'javascript variable scope' for further information!