KavitaC
KavitaC

Reputation: 635

How to use global functions/Utility Class in EXTJS

My code structure is as follows->

MyApp-> app -> controller, model, store, shared (util-> Utility.js), view

I have created the following Utility Class

Ext.define('MyApp.shared.util.Utilities', {

    myFunction : function (val, meta, rec) {
        //do something 
        return val;
    }
});

I am trying to call the myFunction while rendering a column in my grid as follows ->

Ext.define('MyApp.view.MyGrid', {
        extend: 'Ext.grid.Panel',        

        initComponent: function() {
            var rendererFn = Ext.create('MyApp.shared.util.Utilities');

            this.columns = [{
                text: 'Col1',
                dataIndex: 'col1'
                renderer: rendererFn.myFunction
            };

            this.store = new MyApp.store.MyStore();
            this.store.load();
            this.callParent(arguments);
        }        
});

This works fine but I want to know if this is the correct way of using global functions.

Upvotes: 2

Views: 3291

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

A better way would be to declare your class a singleton:

Ext.define('MyApp.shared.util.Utilities', {
    singleton: true,
    myFunction : function (val, meta, rec) {
        //do something 
        return val;
    }
});

Ext.define('MyApp.view.MyGrid', {
    extend: 'Ext.grid.Panel',        

    initComponent: function() {
        this.columns = [{
            text: 'Col1',
            dataIndex: 'col1'
            renderer: MyApp.shared.util.Utilities.myFunction
        }];

        this.store = new MyApp.store.MyStore();
        this.store.load();
        this.callParent(arguments);
    }        
});

Upvotes: 8

Related Questions