Question

我有一个包含不同参数的表单和嵌套的json，这里是代码：

{
"orderoptions": [
{
  "id": "10",
  "rdd": "20150108",
  "headerfieldconfigs": [
    {
      "propertyname": "name",
      "propertyvalue": "rdd",
      "required": "true",
      "hidden": "false",
      "propertyoptions": []
    },
    {
      "propertyname": "name",
      "propertyvalue": "poNr",
      "required": "false",
      "hidden": "false",
      "propertyoptions": []
    },
    {
      "propertyname": "name",
      "propertyvalue": "shipManually",
      "required": "false",
      "hidden": "false",
      "propertyoptions": []
    },
    {
      "propertyname": "name",
      "propertyvalue": "name",
      "required": "true",
      "hidden": "false",
      "propertyoptions": []
    },
    {
      "propertyname": "name",
      "propertyvalue": "region",
      "required": "true",
      "hidden": "false",
      "propertyoptions": [
        {
          "text": "Agriento",
          "value": "AG",
          "country": "IT"
        },
        {
          "text": "Alessandria",
          "value": "AL",
          "country": "IT"
        },
        {
          "text": "Ancona",
          "value": "AN",
          "country": "IT"
        },
        {
          "text": "Aosta",
          "value": "AO",
          "country": "IT"
        },
        {
          "text": "Arezzo",
          "value": "AR",
          "country": "IT"
        },
        {
          "text": "Ascoli Piceno",
          "value": "AP",
          "country": "IT"
        },
        {
          "text": "Asti",
          "value": "AT",
          "country": "IT"
        },
        {
          "text": "San Marino",
          "value": "SM",
          "country": "SM"
        },
        {
          "text": "Bari",
          "value": "BA",
          "country": "IT"
        },
        {
          "text": "BarlettaAndriaTrani",
          "value": "BT",
          "country": "IT"
        },
        {
          "text": "Belluno",
          "value": "BL",
          "country": "IT"
        }],
    {
      "propertyname": "name",
      "propertyvalue": "country",
      "required": "true",
      "hidden": "false",
      "propertyoptions": [
        {
          "text": "Italy",
          "value": "IT",
          "country": "IT"
        },
        {
          "text": "San Marino",
          "value": "SM",
          "country": "SM"
        }
      ]
    }, 
]}

具体而言，我有两个选择区域称为区域和国家，根据国家/地区，您应该选择确定区域，在此示例中我们有两个国家，意大利和圣马力诺。这里的商店代码与相关的模型。

如何正确过滤我选择意大利以查看意大利地区等等...... ??

Ext.define('OrderOption', {
extend: 'Ext.data.Model',
requires: [
    'FieldConfig'
],

config: {
    useCache: false,
    idProperty: 'id',
    fields: [
        'id',
        'salesarea',
        'ordertype',
        'ordertypetext',
        'rdd'
    ],
    associations: [

        {
            type: 'hasMany',
            associatedModel: 'FieldConfig',
            ownerModel: 'OrderOption',
            name: 'headerfieldconfigs',
            associationKey: 'headerfieldconfigs'
        }

    ]
}
});

在控制器中，我已经开始实施，但它无法正常工作..

    onShipManuallyCountryChange: function(field, newValue, oldValue, eOpts){
    var store = Ext.getStore('OrderOptions');
    switch (newValue) {
        case 'SM' :
            this.getShipManuallyRegion().setValue(newValue);
            break;
        case 'IT' :
            this.getShipManuallyRegion().setValue('Agriento');
            break;
    }
    },

任何例子??谢谢！

Answer 1

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

我已经使用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 Fiddle创建了一个小提琴HERE，演示了这一点。

通常，您会收听更改事件，然后在子商店中应用过滤器。

希望这有帮助

编辑：这是使用嵌套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"}
    ]
  }]
}

在sencha touch 2下的关联模型中过滤

1 个答案: