JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all.js"></script>
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">
<div id="cb1"></div>
<div id="cb2"></div>
JavaScript
Ext.onReady(function() {
var names = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'store'],
data : [
{"id":1, "name":"Tom", "store":"tomspets"},
{"id":2, "name":"Lisa", "store":"lisaspets"},
{"id":3, "name":"Anna", "store":"annaspets"}
//...
]
});
Ext.create('Ext.data.Store', {
fields: ['id', 'petname'],
storeId: 'tomspets',
data : [
{"id":1, "petname":"White Cat"},
{"id":2, "petname":"Orange Cat"}
]
});
Ext.create('Ext.data.Store', {
fields: ['id', 'petname'],
storeId: 'lisaspets',
data : [
{"id":1, "petname":"Dog"},
{"id":2, "petname":"Cat"}
]
});
Ext.create('Ext.data.Store', {
fields: ['id', 'petname'],
storeId: 'annaspets',
data : [
{"id":1, "petname":"White Rabbit"},
{"id":3, "petname":"Bronn Rabbit"}
//...
]
});
var comp = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose Pet',
queryMode: 'local',
renderTo: 'cb2'
});
var comp1 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose Name',
store: names,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
renderTo: 'cb1',
listeners: {
select: function(checkbox,records) {
comp.clearValue();
console.log(records[0]);
console.log(Ext.StoreMgr.lookup(records[0].data.store));
comp.bindStore(Ext.StoreMgr.lookup(records[0].data.store));
// you can change the value field if needed
comp.displayField = 'petname';
// you can change the display field if needed
comp.valueField = 'id';
// you can change the display template if needed
...