ExtJS: глобальная функция выполняется перед загрузкой страницы. Как отложить?
У меня есть combobox внутри panelitems, и я поместил событие select в comboboxlisteners. Функция события вызывает глобальный метод, но эта глобальная функция выполняется во время загрузки страницы.
Я использую этот метод выбора со списком для нескольких классов. Следовательно, глобальная функция будет слишком простой. Поэтому нужно использовать с нормальным поведением при выборе элементов combobox. Как я могу добиться этой корректировки?
Функция Глобальный:
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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
How to delay?
Не нужно откладывать, просто нужно изменить путь.
Поскольку вы предоставляете функцию для select, и она будет вызывать загрузку страницы или создание компонента, поэтому вместо этого вам нужно вызвать внутри функции события select.
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?
Итак, для этого, как вы упомянули, Я использую этот метод выбора combobox для нескольких классов, для этого вы можете создать общий компонент, и вы можете легко получить значение для этого общего компонента 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 я создал демо. Надеюсь, это поможет / направит вас в достижении ваших требований.
КОД СНОВА
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.info(record.get('name'));
//As per you implement
console.info(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()
})
}
});
Уважаемый @N. Джадхав - это очень ясное объяснение. Большое спасибо.