Ext JS Cascading Combobox

Question

I'm trying to create a cascading combobox but I'm failing to populate the second combobox.

At the moment I've something like this:

var comboStore = null;
comboStore = Ext.create('Ext.data.Store', {
    fields: ['ID', 'Name', 'isChecked'],
    data: field.values
});
console.log(comboStore);
var comboboxField = Ext.create('SGS.view.field.ComboBox', {
    listeners: {
         select: function (combo, record, index) {
             var tablescomboStore = null;
             Ext.Ajax.request({
                 url: 'Services/DBSourceService.ashx',
                 method: 'GET',
                 params: {
                     id: combo.value
                 },
                 reader: {
                     type: 'json',
             rootProperty: 'data', successProperty: 'success'
                     //root: 'items'
                 },
                 success : function(response, opts)
                 {
                     var tablescomboStore = null;
                     tablesComboStore = Ext.create('Ext.data.Store', {
                         response: ['ID', 'Name', 'isChecked'],
                         data: response.values
                     });
                     var tablesComboboxField = Ext.create('SGS.view.field.ComboBox', {
                         cls: 'ACombo3',
                         labelSeparator: '',
                         labelWidth: 110,
                         width: 400,
                         fieldLabel: response.name,
                         name: response.propName,
                         displayField: 'Name',
                         valueField: 'ID',
                         forceSelection: true,
                         editable: false,
                         store: tablesComboStore
                     });
                     if (tablesComboStore != null) {
                         var selected = null;
                         Ext.each(tablesComboStore.data.items, function (item) {
                             if (item.data.Checked) { selected = item; }
                         });

                         if (selected) tablesComboboxField.select(selected);
                     }
                     tablesComboboxField.addListener('select', checkDirty);
                     instance.add(tablesComboboxField);
                },
             });
         }
     },
    cls: 'ACombo2',
    labelSeparator: '',
    labelWidth: 110,
    width: 400,
    fieldLabel: field.name,
    name: field.propName,
    displayField: 'Name',
    valueField: 'ID',
    forceSelection: true,
    editable: false,
    store: comboStore
});

if (comboStore != null) {
    var selected = null;
    Ext.each(comboStore.data.items, function (item) {
        if (item.data.Checked) { selected = item; }
    });

    if (selected) comboboxField.select(selected);
}
comboboxField.addListener('select', checkDirty);
instance.add(comboboxField);

I first receive a Json which I put in a store to create some form fields, like Name, Value and Combobox. I want to receive a second Json to populate my second combobox after the first combobox selection.

The second combobox is being created, but without no data.

heisenberg heisenberg · Accepted Answer · 2014-10-02T15:53:13

you can't use response directly since it is a string. try to parse it first:

here you go:

var myArr = JSON.parse(response.responseText);
Ext.each(myArr.values, function (value) {
    var tablescomboStore = null;
    tablesComboStore = Ext.create('Ext.data.Store', {
        fields: ['ID', 'Name', 'isChecked'],
        data: myArr.values
    });
    var tablesComboboxField = Ext.create('SGS.view.field.ComboBox', {
        cls: 'ACombo3',
        labelSeparator: '',
        labelWidth: 110,
        width: 400,
        fieldLabel: value.name,
        name: value.propName,
        displayField: 'Name',
        valueField: 'ID',
        forceSelection: true,
        editable: false,
        store: tablesComboStore
    });

Ext JS Cascading Combobox

1 Answers