1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    0
    Answers
    1
    kramal is an unknown quantity at this point

      0  

    Default Answered: Problems with scope.

    Answered: Problems with scope.


    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);
    }


    })
    Last edited by kramal; 15 Feb 2013 at 5:11 AM. Reason: to make our life easier

  2. Code:
        {         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

  3. #2
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    311
    Vote Rating
    52
    Answers
    59
    droessner is a jewel in the rough droessner is a jewel in the rough droessner is a jewel in the rough

      0  

    Default


    Try this:

    Code:
    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);
        }
    });

  4. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


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

    Code:
    
    
    Code:
    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);
        }
    }
    ]
    })

    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #4
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    0
    Answers
    1
    kramal is an unknown quantity at this point

      0  

    Default


    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 !

  6. #5
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    47
    Vote Rating
    3
    Answers
    4
    mixo is on a distinguished road

      0  

    Default


    well it'll be funny hack but you can define

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

  7. #6
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    0
    Answers
    1
    kramal is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by mixo View Post
    well it'll be funny hack but you can define

    Code:
    scope:this
    in button config
    and in btn handler you can access to scope like this.scope.setButtonsText
    Would you show me it,please?

  8. #7
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    47
    Vote Rating
    3
    Answers
    4
    mixo is on a distinguished road

      1  

    Default


    Code:
        {         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

  9. #8
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    0
    Answers
    1
    kramal is an unknown quantity at this point

      0  

    Default


    thank you very ma ..!

    I understand it