CODEWITHSUNDEEP
javascriptextjswindowoverridingextjs5
David
David

Reputation: 4271

How to override extJs Controller component

I have created some generic component which I am using in different product. Now here I have one window and window controller which is generic and I am overriding window class to make use of that in our product.

My Generic window. 

Ext.define('App.win.Panel', {
    extend: 'Ext.window.Window',
    closeAction:'destroy',
    maximizable:true,
    hideToolbar:false,
    requires: [
        'App.MyWinCon.PanelController'
    ],
    xtype: 'MyWin',
    name:'MyWin',

    controller: 'MyWinCon',
    layout: {
        type: 'border'
    },
    gridConfigs:{},
    initComponent:function(){
        var p=this;
       p.items = [{
        //items
       }];
        p.callParent(arguments);
    }
});

And In my Product app I am using overriding like this way :

var Window1 = Ext.create('App.win.Panel', {
            title: Windo,
            modal:true,
            height: '90%',
            width: '95%',
            parentGridObj:gridObj,
        });
        Window1.show();

There is no problem in that part. Window is coming. Now in similar passion I have written controller in generic. I will show you small piece of code 

Ext.define('App.MyWinCon.PanelController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.MyWinCon',

    init: function(){
        var p = this;
        p.control({
        #:{
            beforeclose : function(this){
            // SOme code
            }
        }
       });     
    }

Now can anybody help me how to access this beforeclose or similar kind of methods in my app which is written in generic class. Thanks for all the help.

Upvotes: 1

Views: 758

Answers (1)

Alexander
Alexander

Reputation: 20224

You can't, or it's at least really really complicated; but there is a really really easy way with a minimum of refactoring:

Ext.define('App.MyWinCon.PanelController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.MyWinCon',

    init: function(){
        var p = this;
        p.control({
        #:{
            beforeclose : p.beforeClose // just a reference to function below!
        }
       });     
    },
    beforeClose: function(component){ // thou ought not use a variable named "this"!
        // SOme code
    }

Now you can access the function from your view:

view.getController().beforeClose()

Upvotes: 1

Related Questions