i want to create a tab generation that gets the variables in another javascript and show it in the center panel so i have one javascript for the generator and 1 javascript for the variable to be called in the tab; the scenario is when i click the treenode by its id, it shows the tab at the center and then displays the (dailyCalendar) variable coming from the other javascript.

Please i need a big help 4 this tnx!




Ext
.QuickTips.init();





var tabs =new Ext.TabPanel({

region
:'center',

id
:'tbp',

resizeTabs
:true,

minTabWidth
:115,

tabWidth
:135,

enableTabScroll
:true,

width
:600,

height
:250,

defaults
:{autoScroll:true}

});






var treePanel =new Ext.tree.TreePanel({

id
:'tree-panel'

,title:'Menu'

,region:'north'

,split:true

,height:300

,minSize:150

,autoScroll:true

,rootVisible:false

,lines:false

,singleExpand:true

,useArrows:true


,loader:new Ext.tree.CLPRTreeLoaderFix({

dataUrl:GLOBAL_URL_INDIVIDUAL_MENU

,dataVar:'menu'

,dataRoot:'list'

})


,root:new Ext.tree.AsyncTreeNode()

});



treePanel
.on('click',function(xNode){

var xNodeRefId = xNode.attributes['id'];

if(xNodeRefId=='daily-calendar'){

tabs
.add({

title
:'Daily Calendar',

closable:true

}).show()

}

});


var detailsPanel ={

id
:'details-panel'

,title:'Details'

,region:'center'

//collapsible:true

,autoScroll:true

};



new Ext.Viewport({

layout
:'border'

,title:'Ext Layout Browser'

,items:[

{

region
:'north'


,height:50

,html:'<div id="header"></div>'

},{

layout
:'border'

,id:'west-panel'

,region:'west'

,border:false

,split:true

,collapsible:true

,margins:'2 0 5 5'

,width:200

,minSize:100

,maxSize:500

,items:[treePanel, detailsPanel]

},

tabs

]

});

other javascript:

var
proxy =new Ext.data.HttpProxy({

url
: GLOBAL_URL_DAILY_CALENDAR_GRID
});


var reader =new Ext.data.JsonReader({},[{

name
:'timeSlot'

},{

name
:'activity'

},{

name
:'no_of_units'

},{

name
:'observed_time'

},{

name
:'theoretical_time'

},{

name
:'additional_activity'

},{

name
:'additional_prod_time'

},{

name
:'additional_nonprod_time'

},{

name
:'total_time'

},{

name
:'efficiency'

},{

name
:'productivity'

},{

name
:'utilization'

}])


var store =new Ext.data.Store({

proxy
: proxy,

reader
: reader
});


var gridDailyCalendar =new Ext.grid.GridPanel({

region
:'center',

id
:'grid-daily-calendar',

store
: store,

columns
:[{

header
:"Time",

id
:'time',

width
:120,

dataIndex
:'timeSlot',

sortable
:false

},{

header
:"Actvity",

id
:'activity',

width
:200,

dataIndex
:'activity',

sortable
:true

},{

header
:"Number of Units Produced",

id
:'num-of-units-produced',

width
:115,

renderer
: fnMulti,

dataIndex
:'no_of_units',

sortable
:true

},{

header
:"Observed Time (hr:mms)",

id
:'observed-time',

width
:115,

dataIndex
:'observed_time',

sortable
:true

},{

header
:"Theoretical Time (hr:mms)",

id
:'theoretical-time',

width
:115,

dataIndex
:'theoretical_time',

sortable
:true

},{

header
:"Additional Activity",

id
:'add-activity',

width
:115,

dataIndex
:'',

sortable
:true

},{

header
:"Additional Productive Activity Time(hr:mms)",

id
:'add-pro-act-time',

width
:130,

dataIndex
:'additional_prod_time',

sortable
:true

},{

header
:"Additional Activity Time (hr:mms)",

id
:'add-act-time',

width
:150,

dataIndex
:'additional_nonprod_time',

sortable
:true

},{

header
:"Total Activity Time (hr:mms)",

id
:'total-act-time',

width
:115,

dataIndex
:'total_time',

sortable
:true

},{

header
:"Efficiency %",

id
:'efficiency',

width
:80,

dataIndex
:'efficiency',

sortable
:true

},{

header
:"Productivity %",

id
:'productivity',

width
:90,

dataIndex
:'productivity',

sortable
:true

},{

header
:"Utilization %",

id
:'utilization',

width
:80,

dataIndex
:'utilization',

sortable
:true

}],

tbar
:["First row:",{

text
:"Button 1"

},'-',{

text
:"Button 2"

}]



});



store
.load();


var tb2 =new Ext.Toolbar({

renderTo
: grid-daily-calendar.tbar,

items
:["Second row:",{

text
:"Button 3"

},'-',{

text
:"button 4"

}]

});


var dailyCalendar ={

id
:'daily-calendar-panel',

items
:[{

title
:'Individual Daily Calendar',

layout
:'border',

items
:[{

region
:'north',

title
:'North',

height
:50,

maxSize
:150,

margins
:'5 5 0 5',

bodyStyle
:'padding:10px;',

split
:true,

html
:'Username Day Date Time'

},
gridDailyCalendar
,{

region
:'south',

height
:74,

autoScroll
:true,

html
:'<p>formulas</p>'

}]

}]

};




}