ExtJS: Глобальная функция выполняется перед загрузкой страницы. Как задержать? - PullRequest
Новая
       52

ExtJS: Глобальная функция выполняется перед загрузкой страницы. Как задержать?

0 голосов
/ 08 мая 2018

У меня combobox внутри panel items и помещено событие select в combobox listeners. Функция Event вызывает глобальный метод, но эта глобальная функция выполняется во время загрузки страницы.

Я использую этот метод выбора со списком в нескольких классах. Поэтому глобальная функция будет легкой. Так что нужно использовать с нормальным поведением при выборе элементов в выпадающем списке. Как мне достичь этой настройки?

Глобальная функция: 

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;
    },
});

и Панель: 

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
         }
     }]
 });

при запуске этого подхода; Глобальная функция запускается при загрузке страницы при щелчке button, который отображает FooPanel и его элементы и выдает ошибку из-за невозможности выбрать комбинированный элемент.; 

Uncaught TypeError: Cannot read property 'getSelectedRecord' of undefined

1 Ответ

0 голосов
/ 08 мая 2018

Как задержать?

Нет необходимости откладывать, просто нужно изменить способ.

Поскольку вы предоставляете функцию для select, и она будет вызывать загрузку страницы или создание компонента, поэтому вместо этого вам нужно вызывать внутри select функцию события.

Я использую этот метод выбора со списком в нескольких классах. Поэтому глобальная функция будет легкой. Так что нужно использовать с нормальным поведением при выборе элементов в выпадающем списке. Как мне достичь этой настройки?

Так что для этого, как вы упомянули Я использую этот метод выбора в выпадающем списке для нескольких классов , для этого вы можете создать общий компонент и легко получить значение для этого общего компонента select событие.

Пример 

{
    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');
        }
    }
}

В этом FIDDLE я создал демо. Надеюсь, что это поможет / поможет вам в достижении ваших требований.

КОД 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()
        })
    }
});
...