Problems with scope.

[kramal]

Hello All !

I have following example of code an d I am fail to understand what matter is. As you see if apps worked normally the buttons text will be changed by click on it. But there is problem, framework cannot see my method setButtonsText().

Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
title:'Example',
width:200,
height:300,
items:[
{
xtype:'textfield',
fieldLabel:'Text'
},
{
xtype:'button',
text:'Change me by click',
handler: setButtonsText()
}
]
,
setButtonsText:function(){
var text=Ext.ComponentQuery.query('panel > textfield')[0].getValue();

Ext.ComponentQuery.query('panel > button')[0].setTitle(text);
}


})

[droessner]

Try this:

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: 'Example',
    width: 200,
    height: 300,
    items:[{
        xtype:'textfield',
        fieldLabel:'Text'
    }, {
        xtype:'button',
        text:'Change me by click',
        handler: function() {
            this.up('panel').setButtonsText();
        }
    }],
    setButtonsText: function() {
        var text = this.down('textfield').getValue();


        this.down('button').setText(text);
    }
});

[sword-it]

hi kramal
I have made small changes in your code have a look

Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
title:'Example',
width:200,
height:300,
items:[
{
xtype:'textfield',
fieldLabel:'Text',
id:'text'
},
{
xtype:'button',
text:'Change me by click',
scope:this,
handler: function(button){
var value=Ext.getCmp('text').getValue();
    button.setText(value);
    }
}
]
})

[kramal]

Hello All!
1)Sword_it your advise is helpful, but I read that using of Ext.getCmp() is unrecomended style.In your case I would to use better Ext.ComponentQuery.query().

2)droessner your advise is good , But I want to get something like


...
scope:this,
...
this.setButtonsText()

Thanks !

[mixo]

well it'll be funny hack but you can define

scope:this

in button config
and in btn handler you can access to scope like this.scope.setButtonsText

[kramal]

well it'll be funny hack but you can define

scope:this

in button config
and in btn handler you can access to scope like this.scope.setButtonsText

Would you show me it,please?

[mixo]

    {         xtype:'button',         text:'Change me by click',
        scope: this,         handler: function() {             this.scope.setButtonsText();         }     }

where this is pointer to your panel object, so there scope is just property of button but not function context object

[kramal]

thank you very ma ..!

I understand it