View Full Version : scope of handler

8 Jul 2010, 8:45 AM
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',

}, {
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,



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

8 Jul 2010, 5:44 PM
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.

9 Jul 2010, 6:48 AM
Thank you. Could you let me know how to set and retrieve the id of a component? or point me to this documentation?

13 Jul 2010, 11:37 AM
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.