Ext JS - Populate combobox using value from another Combobox from Database (SQL) - sql

Question

I have two combobox, values are coming from database i am using json to populate the same. Second combo gets populated when the first combo changes. First time when we set the value of the first combo it works like magic. But second time, it does not get bind. and throws an error
This is my running code:
<script type="text/javascript">
Ext.onReady(function() {
var serverStore = Ext.create('Ext.data.Store', {
storeId: 'serverStore',
fields: [
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
sqlQuery: 'select distinct(u_hostname) from SCRIPT_SCHEDULE'
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsStore = Ext.create('Ext.data.Store', {
storeId: 'dpsStore',
fields: [
{
name: 'u_username',
mapping: 'u_username',
type: 'string'
},
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsCombo = Ext.create('Ext.form.ComboBox',{
id: 'dpsCombo',
fieldLabel: 'Username',
hidden: false,
margin: '5 0 0 25',
queryMode: 'local',
valueField: 'u_username',
displayField: 'u_username'
});
var serverCombo = Ext.create('Ext.form.ComboBox',{
id: 'serverCombo',
fieldLabel: 'Server Name',
hidden: false,
margin: '5 0 0 25',
store: serverStore,
queryMode: 'local',
valueField: 'u_hostname',
displayField: 'u_hostname',
listeners: {
change: changeStore
}
});
function changeStore(combo, value){
var store;
store = dpsStore;
var combobox = Ext.getCmp('dpsCombo');
combobox.clearValue();
console.log(value);
store.getProxy().setExtraParam("sqlQuery", `select distinct(u_username) from SCRIPT_SCHEDULE where u_hostname ='${value}'`);
console.log(value);
combobox.bindStore(store);
store.load();
}
Ext.create('Ext.container.Viewport', {
id: 'processviewport',
layout: 'border',
items: [{
xtype: 'panel',
id: 'filterPanel',
layout: 'hbox',
title: 'Data filter',
region: 'north',
collapsible: true,
items: [{
xtype: 'panel',
layout: 'hbox',
flex: 2,
items:[
{
xtype: 'panel',
layout: 'vbox',
items: [
serverCombo,
dpsCombo
]
}]
}]
}]
});
});
</script>
Error :
Uncaught TypeError: Cannot read property 'call' of undefined

Answer 1

The issue the combobox was not rendering data on the second change was resolved by adding lastQuery: field in the second combo.