Threaded View

  1. 19 Aug 2011 7:19 AM #1
    aacoro
    aacoro is offline
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    Answers
    3
    aacoro is on a distinguished road
      0  

    Cool Answered: Damn scoping, what am I missing??

    Answered: Damn scoping, what am I missing??


    Hi guys,

    I'm testing some things and I thought that I fully understand scoping but I have a issue:

    See the following code:

    Code:
    Ext.define("MyCompany.MyScheduler", {    
extend                 : 'Sch.panel.SchedulerGrid',
    tbar             : [
        {
            xtype    : 'buttongroup',
            columns    : 3,
            title    : Your menu,
            items    : [
                {
                    iconCls     : 'icon-prev',
                    handler : function() {
                        this.shiftPrevious();
                    }
                },
                {
                    text        : 'Date',
                    menu        : Ext.create('Ext.menu.DatePicker', {
                        handler        : function(datePicker, pickedDate) {
                            var startDateTime = new Date(pickedDate);
                            startDateTime.clearTime();
                            startDateTime.setHours(5);
                            var endDateTime = startDateTime.clone();
                            endDateTime.setHours(21); 
                            return schPanel.switchViewPreset('pnViewPreset', startDateTime, endDateTime);
                        }
                    })
                },
                {
                    iconCls     : 'icon-next',
                    handler     : function() {
                        this.shiftNext();
                    }
                }
            ]
        }
    ],
    initComponent : function() {
        Ext.apply(this, {
            // Setup your static columns
            columns : [
                { header : 'Header1', sortable: true, width: 150, dataIndex : 'Header1' },
                { header : 'Header2', sortable: true, width: 100, dataIndex : 'Header2 }
            ]
        });
        
        this.callParent(arguments);
    }
});
    the problem is
    this.shiftNext() AND this.shiftPrevious()
    In both cases it is telling:
    Uncaught TypeError: Object [object Object] has no method 'shiftNext'
    If I place the entire tbar code in:
    Code:
            Ext.apply(this, {            // Setup your static columns
            columns : [
                { header : 'Header1', sortable: true, width: 150, dataIndex : 'Header1' },
                { header : 'Header2', sortable: true, width: 100, dataIndex : 'Header2 }
            ]
        });
        
        this.callParent(arguments);
    Then it is working, but this is a workaround, the real bug is me, i still do not understand it in this context...

    This class is called from another JavaScript file like this:
    Code:
    var scheduler = Ext.create("MyCompany.MyScheduler", {            
            dndValidatorFn    : this.validatorFn,
            viewConfig          : {stripeRows : false, forceFit: true}
})
    Last edited by aacoro; 19 Aug 2011 at 9:53 AM. Reason: Typo
    Reply With Quote Reply With Quote
  2. Best Answer Posted by mankz

    Scope is tricky, until you get it

    You have to put scope specific code in a template method (constructor, initComponent, onRender, etc) where you can get access to the component instance.

    All you need to think about to figure out the scope is: What is 'this' when the relevant function is parsed.

    Code:
    alert('Right now, "this" is ' + this); 
Ext.define("MyCompany.MyScheduler", {    
extend                 : 'Sch.panel.SchedulerGrid',
    tbar             : [
        {
            xtype    : 'buttongroup',
            columns    : 3,
            title    : Your menu,
            items    : [
                {
                    iconCls     : 'icon-prev',
                    handler : function() {
                        this.shiftPrevious();
                    }
                },
                {
                    text        : 'Date',
                    menu        : Ext.create('Ext.menu.DatePicker', {
                        handler        : function(datePicker, pickedDate) {
                            var startDateTime = new Date(pickedDate);
                            startDateTime.clearTime();
                            startDateTime.setHours(5);
                            var endDateTime = startDateTime.clone();
                            endDateTime.setHours(21); 
                            return schPanel.switchViewPreset('pnViewPreset', startDateTime, endDateTime);
                        }
                    })
                },
                {
                    iconCls     : 'icon-next',
                    handler     : function() {
                        this.shiftNext();
                    }
                }
            ]
        }
    ],
    initComponent : function() {
        alert('Right now, "this" is ' + this);
        Ext.apply(this, {
            // Setup your static columns
            columns : [
                { header : 'Header1', sortable: true, width: 150, dataIndex : 'Header1' },
                { header : 'Header2', sortable: true, width: 100, dataIndex : 'Header2 }
            ]
        });
        
        this.callParent(arguments);
    }
});
    In code above, as the class definition is parsed, the code is running in the global context - hence 'this' will point to the window object. But when you create an instance of a class, inside its constructor and any following method calls, 'this' will point to the instance.

Tags for this Thread