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