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

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"
        }
      ]
    }, 
]}

具体来说，我有两个 select 字段，分别称为区域和国家/地区，根据国家/地区的不同，您应该 select 确定区域，在此示例中，我们有两个国家/地区，意大利和圣马力诺。这里是带有关联模型的商店代码。

如何正确过滤和我select意大利看意大利地区等等...??

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 创建了一个 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 下的关联模型中进行过滤

Filtering in a association model under sencha touch 2

javascript

extjs

sencha-touch-2