Ext.define a view and scope

Question

Ext.define('Myapp.view.itemsBagPanel', {
    extend : 'Ext.panel.Panel',
    ...
    validatorFn:function(item,source,target,isSpecial) {
        return false;
    },
    createValidatorFn:function(item,source) {
        return this.validatorFn(item,source,source,false);
    },
    moveValidatorFn: function(item, source, target) {
       return this.validatorFn(item,source,target,true);
    }

This is the raw skeleton of my view, and now I need to know how I can access validatorFn from createValidatorFn. "this" does not work, as it seems.

Answer 1

The other way would be to use:

Ext.define('Myapp.view.itemsBagPanel', {
    extend : 'Ext.panel.Panel',
    initComponent   : function() {
        var me = this;
        Ext.apply(me,{
            createValidatorFn:function(item,source) {
                return me.validatorFn(item,source,source,false);
            },
            moveValidatorFn: function(item, source, target) {
               return me.validatorFn(item,source,target,true);
            }
        });
    },
    validatorFn:function(item,source,target,isSpecial) {
        return false;
    }

Note that you have to have the validatorFn defined outside initComponent (or use two calls to apply), because me.validatorFn has to be defined before createValidatorFn and moveValidatorFn can use them.

Answer 2

You can do something like this :

Ext.define('Myapp.view.itemsBagPanel', {
extend : 'Ext.panel.Panel',
...
initComponent   : function() {
    itemsBagPanel = this;    //Declaration
    this.items=[{....}];
    this.callParent();
}
validatorFn:function(item,source,target,isSpecial) {
    return false;
},
createValidatorFn:function(item,source) {
    itemsBagPanel.validatorFn(); // You can access other functions
    return this.validatorFn(item,source,source,false);
},
moveValidatorFn: function(item, source, target) {
   return this.validatorFn(item,source,target,true);
}