PDA

View Full Version : Problems with scope.



kramal
15 Feb 2013, 5:10 AM
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
15 Feb 2013, 6:31 AM
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
16 Feb 2013, 12:17 AM
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
18 Feb 2013, 12:29 AM
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
18 Feb 2013, 1:14 AM
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
18 Feb 2013, 1:43 AM
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
18 Feb 2013, 2:32 AM
{ 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
18 Feb 2013, 2:37 AM
thank you very ma ..!

I understand it:)