在sencha touch 2下过滤关联模型

Question

I have a form with different parameters and nested json, here the code:

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

Concretely I have two selectfields called region and country and depending of the country you should select determinated regions in this example we have two countries, Italy and San Marino. Here the store code with the associated model.

How to filter properly and I select Italy to see the Italy regions and so on... ??

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'
        }

    ]
}
});

In the controller I have started the implementation but It is not working properly..

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

Any example?? thanks!!

Answer 1

To resolve this issue fully you would need to show the code for your stores and the form.

It's a while since I've used ST2, But I don't beleive that you can bind a components data on child data of a store. you have to apply the logic for this yourself.

I have created some sample code for you that should demonstrate how this can be approached, There are multiple ways of achieving this and mine may not be the best. But it does work.

I have simplified the data for demo purposes and used local array data.

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

I have also created a fiddle HERE using Sencha Fiddle which demonstrates this in use.

Bascially you listen to the change event and then apply a filter on the child store.

Hope this helps

EDIT: Here is an example of doing this with Nested Json, Although the JSON supplied is not valid, I would also recommend simplifying it:

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