Extjs4 Creating a mixin

Question

Im trying to create a mixing for Ext.grid.Panel components. This is how I have attempted to do it:

Ext.define('myMixin', {
    myFunc:function(){
        console.log('completed!');
    }
});

Ext.grid.Panel.mixin('newmixin','myMixin');

The result of this is a mixin has been added to grid components, but the value is undefined . Hopefully I have missed something simple, but some help would be much appreciated.

Answer 1

Remember that Ext.define completes asynchronously. I don't know what Ext.grid.Panel.mixin is, as this does not exist in ExtJS 4.0.1, but you might try adding the mixin within the callback parameter of Ext.define:

Ext.define('myMixin', {
    myFunc:function(){
        console.log('completed!');
    }
}, function() {
    Ext.grid.Panel.mixin('newmixin','myMixin');
});

Answer 2

I have solved the problem, but im still not 100% sure of the reason. If somebody can explain im more than happy to mark them as the answer.

I did the following:

Ext.grid.Panel.mixin('newmixin',Ext.define('myMixin', {
    myFunc:function(){
        console.log('completed!');
    }
}));

Answer 3

Have you tried to add your mixin declaratively?

Ext.define('Path.to.MyMixin', {
    someFunc: function () {return 0;}
});

And then, in your grid:

Ext.define('Path.to.MyGrid', {
    extend: 'Ext.grid.Panel',
    mixins: ['Path.to.MyMixin'],
    ...
});