Results 1 to 8 of 8

Thread: Problems with scope.

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    45
    Answers
    1
    Vote Rating
    0
      0  

    Default 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
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    316
    Answers
    59
    Vote Rating
    59
      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 User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124
    Vote Rating
    91
      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
    45
    Answers
    1
    Vote Rating
    0
      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
    63
    Answers
    5
    Vote Rating
    4
      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
    45
    Answers
    1
    Vote Rating
    0
      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
    63
    Answers
    5
    Vote Rating
    4
      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
    45
    Answers
    1
    Vote Rating
    0
      0  

    Default

    thank you very ma ..!

    I understand it

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •