ExtJS: Global function executes before page load. How to delay?

Question

I've a combobox inside panel items and placed a select event in combobox listeners. Event's function calls a global method but this global function executes during page load.

I'm using this combobox selection method on several classes. Therefore a global function will be to easy. So need to use with normal behaviour during combobox's items selection. How can I achieve to this adjustment?

Global function:

Ext.define('MyApp.BaseMethods', {
    requires: [],
    singleton: true,

    // Instead of using method content several times; passing comboname and required JSON value on arguments
    comboQuery: function(comboname, JSONValue) {
        var query = Ext.ComponentQuery.query(comboname)[0].getSelectedRecord();
        var requiredValue = query.get(JSONValue);

        return requiredValue;
    },
});

and Panel:

Ext.define('MyApp.view.FooPanel', {
     extend: 'Ext.panel.Panel',
     items: [{
         xtype: 'foocombo',
         listeners: {
             // Trying to pass required information through parameters
             select: MyApp.BaseMethods.comboQuery('[name=myfoocombo]', 'foojsonvalue'),
             scope: me
         }
     }]
 });

When runing this approach; Global function runs during page-load on button click which displays FooPanel and it's items and give error because of did not able to select combo item.;

Uncaught TypeError: Cannot read property 'getSelectedRecord' of undefined

Answer 1

How to delay?

No need to delay just need to change the way.

As your providing a function to select and it will call on page load or component create so instead of this you need to call inside of select event function.

I'm using this combobox selection method on several classes. Therefore a global function will be to easy. So need to use with normal behaviour during combobox's items selection. How can I achieve to this adjustment?

So for this as you mentioned I'm using this combobox selection method on several classes for this you can create a common component and you can get value easily on that common component select event.

Example

{
    xtype: 'combobox',
    listeners: {
        function: select(combo, record, eOpts) {
            //you can get easily value here
            //{record} With multiSelect false, the value will be a single record. With multiSelect true, the value will be an array of records.
            record.get('you json name');
        }
    }
}

In this FIDDLE, I have created a demo. Hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Common Component
        //I'm using this combobox selection method on several classes.
        Ext.define('foocombo', {
            extend: 'Ext.form.field.ComboBox',
            xtype: 'foocombo',
            store: {
                fields: ['abbr', 'name'],
                data: [{
                    "abbr": "AL",
                    "name": "Alabama"
                }, {
                    "abbr": "AK",
                    "name": "Alaska"
                }, {
                    "abbr": "AZ",
                    "name": "Arizona"
                }]
            },
            fieldLabel: 'Choose State',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            JSONValue: 'name',
            listeners: {
                // Trying to pass required information through parameters
                select: function (combo, record) {
                    //As per simple way
                    console.log(record.get('name'));
                    //As per you implement
                    console.log(MyApp.BaseMethods.comboQuery(`[name=${combo.getName()}]`, combo.JSONValue))
                }
            }
        })

        Ext.define('MyApp.BaseMethods', {
            singleton: true,

            // Instead of using method content several times; passing comboname and required JSON value on arguments
            comboQuery: function (comboname, JSONValue) {
                var query = Ext.ComponentQuery.query(comboname)[0];
                if (query) {
                    var rec = query.getSelectedRecord();
                    return rec.get(JSONValue) || null;
                }
                return null
            }
        });

        Ext.define('MyApp.view.FooPanel', {
            extend: 'Ext.panel.Panel',
            xtype: 'foopanel',
            items: [{
                xtype: 'foocombo',
                name: 'myfoocombo'
            }]
        });

        Ext.create({
            xtype: 'foopanel',
            title: 'Demo',
            bodyPadding: 10,
            renderTo: Ext.getBody()
        })
    }
});