scope of handler

[zerostatic]

I have a button nested 2 levels deep and am trying to call a function on the top level, but can't get it to work. I set the scope to 'parent' and tried 'parent.parent'. See code below, the handler is "handler: doAlert"

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
activeItem: 0,
animation: {
type: 'flip',
cover: true
},
items: [{
title: 'Map',
cls: 'card4',
iconCls: 'settings',
xtype: 'map',
items:[mapdemo],

}, {
title: 'Search',
cls: 'card1',
iconCls: 'user',
items: [{
xtype: 'textfield',
name : 'address',
label: 'Address'
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Search',
ui: 'round',
handler: doAlert,
scope:parent

}
]
}
]

}]

});
//
var doAlert = function(btn, event){
alert('DO IT')
}

[evant]

You can't do that, "parent" isn't a valid scope.

The problem you're facing is that none of the objects are actually created, the whole RHS is evaluated before the tabPanel variable is assigned. The best way would be to use an id to grab the component.

[zerostatic]

Thank you. Could you let me know how to set and retrieve the id of a component? or point me to this documentation?
thanks!

[TommyMaintz]

Every component has an id config option, and you can retrieve a component using Ext.getCmp. You might however want to break up your source code and define individual instances to variables so you can easily reference them.