Ext JS Cascading Combobox

时间:2014-10-02 14:55:02

标签: json extjs combobox

我试图创建一个级联组合框但是我没有填充第二个组合框。

目前我有这样的事情:

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

我首先收到一个Json,我在商店中创建了一些表单字段,如Name,Value和Combobox。在第一个组合框选择后,我想收到第二个Json来填充我的第二个组合框。

正在创建第二个组合框,但没有数据。

1 个答案:

答案 0 :(得分:1)

你不能直接使用响应,因为它是一个字符串。尝试先解析它:

你去:

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