在 sencha 触摸 2 下的关联模型中进行过滤

要完全解决此问题，您需要显示商店和表单的代码。

自从我使用 ST2 以来已经有一段时间了，但我不相信您可以将组件数据绑定到商店的子数据上。 您必须自己为此应用逻辑。

我为您创建了一些示例代码，应该演示如何解决这个问题，有多种方法可以实现这一点，而我的可能不是最好的。但它确实有效。

我简化了用于演示目的的数据，并使用了本地数组数据。

Ext.application({
    name : 'Fiddle',
    launch : function() {
        // create the models
        Ext.define('Country', {
            extend: 'Ext.data.Model',
            config: {
                fields: [
                    { name: 'id', type: 'string' },
                    { name: 'name', type: 'string' }
                ],
                associations: [{
                    type: 'hasMany',
                    associatedModel: 'Region',
                    ownerModel: 'Country',
                    primaryKey: 'id',
                    foreignKey: 'countryId',
                }]
            }
        });
        Ext.define('Region', {
            extend: 'Ext.data.Model',
            config: {
                fields: [
                    { name: 'id', type: 'string' },
                    { name: 'name', type: 'string' },
                    { name: 'countryId', type: 'string' }
                ]
            }
        });

        var countries = [
            ["IT", "Italy"],
            ["SM", "San Marino"]
        ];
        var regions = [
            ["AG", "Agriento", "IT"],
            ["AL", "Alessandria", "IT"],
            ["AN", "Ancona", "IT"],
            ["AO", "Aosta", "IT"],
            ["AR", "Arezzo", "IT"],
            ["AP", "Ascoli Piceno", "IT"],
            ["AT", "Asti", "IT"],
            ["SM", "San Marino", "SM"],
            ["BA", "Bari", "IT"],
            ["BT", "BarlettaAndriaTrani", "IT"],
            ["BL", "Belluno", "IT"]    
        ];
        var countryStore = Ext.create('Ext.data.ArrayStore', {
            model: "Country",
            // store configs
            storeId: 'countryStore',
            data: countries
        });
        var regionStore = Ext.create('Ext.data.ArrayStore', {
            model: "Region",
            // store configs
            storeId: 'regionStore',
            autoLoad: false,
            data: regions
        });
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
            items: [{
                xtype: 'fieldset',
                title: 'Select',
                items: [{
                    xtype: 'selectfield',
                    name: "countrySelect",
                    id: "countrySelectField",
                    displayField: "name",
                    valueField: "id",
                    label: 'Choose one',
                    store: countryStore,
                    autoSelect: false,
                    listeners: {
                        'change': function( select, newValue, oldValue, eOpts ) {
                            regionStore.filter("countryId", newValue);
                        }
                    }
                }, {
                    xtype: 'selectfield',
                    name: "regionSelect",
                    id: "regionSelectField",
                    displayField: "name",
                    valueField: "id",
                    autoSelect: false,
                    label: 'Choose one',
                    store: regionStore
                }]
            }]
        });
    }
});

我还在这里使用Sencha小提琴创建了一个小提琴，该小提琴演示了使用中的这一点。

基本上，您侦听更改事件，然后在子存储上应用筛选器。

希望这有帮助

编辑：这是使用嵌套Json执行此操作的示例，尽管提供的JSON无效，但我也建议简化它：

// app.js
Ext.application({
    name : 'Fiddle',
    launch : function () {
        // create the models
        Ext.define('Country', {
            extend: 'Ext.data.Model',
            config: {
                fields: [
                    { name: 'id', type: 'string' },
                    { name: 'name', type: 'string' }
                ],
                associations: [{
                    type: 'hasMany',
                    associatedModel: 'Region',
                    ownerModel: 'Country',
                    primaryKey: 'id',
                    foreignKey: 'countryId',
                    associationKey: "regions"
                }]
            }
        });
        Ext.define('Region', {
            extend: 'Ext.data.Model',
            config: {
                fields: [
                    { name: 'id', type: 'string' },
                    { name: 'name', type: 'string' },
                    { name: 'countryId', type: 'string' }
                ]
            }
        });
        var myStore = Ext.create("Ext.data.Store", {
            // store configs
            autoDestroy: true,
            storeId: 'myStore',
            autoLoad:true,
            model: "Country",
            proxy: {
                type: 'ajax',
                url: '/data/data1.json',
                reader: {
                    type: 'json',
                    rootProperty: 'countries',
                    idProperty: 'id'
                }
            }
        });
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
            items: [{
                xtype: 'fieldset',
                title: 'Select',
                items: [{
                    xtype: 'selectfield',
                    name: "countrySelect",
                    id: "countrySelectField",
                    displayField: "name",
                    valueField: "id",
                    label: 'Choose one',
                    store: myStore,
                    autoSelect: false,
                    listeners: {
                        'change': function( select, newValue, oldValue, eOpts ) {
                            var country = select.getStore().getById(newValue);
                            console.log(country);
                            console.log(country.regions());
                        }
                    }
                }]
            }]
        });
    }
});
// data/data1.json
{
  "countries": [{
    "id": "IT",
    "name":"Italy",
    "regions": [
      {"id":"AG", "name": "Agriento", "countryId": "IT"},
      {"id":"AL", "name": "Alessandria", "countryId": "IT"},
      {"id":"AN", "name": "Ancona", "countryId": "IT"},
      {"id":"AO", "name": "Aosta", "countryId": "IT"},
      {"id":"AR", "name": "Arezzo", "countryId": "IT"},
      {"id":"AP", "name": "Ascoli Piceno", "countryId": "IT"},
      {"id":"AT", "name": "Asti", "countryId": "IT"},
      {"id":"BA", "name": "Bari", "countryId": "IT"},
      {"id":"BT", "name": "BarlettaAndriaTrani", "countryId": "IT"},
      {"id":"BL", "name": "Belluno", "countryId": "IT"}
    ]
  }, {
    "id": "SM",
    "name":"San Marino",
    "regions": [
      {"id":"SM", "name": "San Marino", "countryId": "SM"}
    ]
  }]
}