Sencha touch Sencha Touch 2嵌套模型和数据存储

我甚至都不知道该怎么问这个问题，但我来了

我有两个模型，一个包含许多食谱的盘子：

Ext.define('NC.model.Platter', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
      { name: 'name', type: 'string' },
      { name: 'text', type: 'string' }
    ],
    associations: [
      {type: 'hasMany', model: 'NC.model.Recipe', name: 'recipes', filterProperty: 'text'}
    ]
  }
});

Ext.define('NC.model.Recipe', {
  extend: 'Ext.data.Model',
  config: {
      fields: [
        { name: 'name', type: 'string' },
        { name: 'image', type: 'string' },
        { name: 'stepsText', type: 'string', mapping: 'properties.preparationText' },
        { name: 'ingredientsText', type: 'string', mapping: 'properties.ingredientsText' }
      ]
    }
});

盘子基本上是在线食谱商店中不同的过滤器。所以我可能有上千种食谱，但我的“比萨”拼盘只会返回比萨食谱（因此filterProperty）。盘子只是在本地创建和存储，而食谱是在线的。因此，商店：

Ext.define('NC.store.Platters', {
  extend: 'Ext.data.Store',

  config: {
    model: 'NC.model.Platter',
    storeId: 'Platters',
    proxy: {
      type: 'localstorage',
      id: 'platters'
    },
    data : [
        {name: 'Noodles', text: 'noodle'},
        {name: 'Baked', text: 'bake'},
        {name: 'Pizza', text: 'pizza'}
    ]
  }
});

Ext.define('NC.store.Recipes', {
  extend: 'Ext.data.Store',

  config: {
    model: 'NC.model.Recipe',
    storeId: 'Recipes',
    proxy: {
      type: 'jsonp',
      url: 'xxxx',  // url here (redacted)
      callbackKey: 'callback',
      filterParam: 'text',
      extraParams: {
        // credentials and tokens here (redacted)
      },
      reader: {
        type: 'json',
        idProperty: 'uuid',
      }
    }
  }
});

现在，我想创建dataview的dataview。盘片列表，每个盘片包含其配方列表：

Ext.define('NC.view.DiscoverGrid', {
  extend: 'Ext.DataView',
  xtype: 'discovergrid',
  id: 'discover',

config: {
    title: 'Discover',
    baseCls: '',
    useComponents: true,
    defaultType: 'platter',
    store: 'Platters',
    ui: 'light'
  }
});

Ext.define('NC.view.Platter', {
  extend: 'Ext.dataview.component.DataItem',
    xtype: 'platter',

  config: {
      layout: 'fit',
      height: '100px',
      list: {
        itemTpl: '{name}',
        inline: true,
        scrollable: {
          direction: 'horizontal',
          directionLock: true
        }
      },
      dataMap: {
        getList: {
          setData: 'recipes'
        }
      }
    },

    applyList: function(config) {
      return Ext.factory(config, Ext.DataView, this.getList());
    },

  updateList: function(newList, oldList) {
    if (newList) {
        this.add(newList);
      }

  if (oldList) {
        this.remove(oldList);
      }
    }
  });

现在，我如何填充拼盘的食谱？如果我在盘片中填充一些在线配方数据，如：

data : [
    {name: 'Noodles', text: 'noodle', recipes: [
      { name: 'Pasta', ingredientsText: "Tomatoes\nPassata\n1tsp Oregano", preparationText: "Do something\nAdd passata\nmix in oregano and tomato",
        ingredients: [{ text: "bla"}]
      }
    ]},
    {name: 'Baked', text: 'bake'},
    {name: 'Pizza', text: 'pizza'}
]

。。。它直接工作，并呈现带有意大利面的数据视图。所以我只需要知道如何让我的盘子填满他们的配方数据。在哪里（我假设在控制器中发生某种初始化事件），如何连接？我是否正确使用filterProperty？我不完全理解这方面的文档，但我认为它通常会过滤外键，而我没有外键，并且filterProperty会覆盖它。这样URL就会附加&text=面条

---

提前感谢。

这显然没有利用我认为Sencha Touch拥有的关联和存储结构，但即使在正确加载

recipes（）

关联之后，我也无法通过它触发dataview刷新。我在这上面花了太多时间，所以我选择了一个不那么优雅的解决方案。我将过滤器文本传递给盘片上的setter，setter使用param中的这个过滤器设置它的存储。它至少起作用了

Ext.define('NC.view.PlatterDataItem', {
  extend: 'Ext.dataview.component.DataItem',
  xtype: 'platterdataitem',


  config: {
    layout: 'vbox',
    height: '130px',
    cls: 'platter',
    list: {
    },
    dataMap: {
      getList: {
        setRecipeFilters: 'text'
      }
    }
  },

  applyList: function(config) {
    return Ext.factory(config, NC.view.Platter, this.getList());
  },

  updateList: function(newList, oldList) {
    if (newList) {
      this.add(newList);
    }


    if (oldList) {
      this.remove(oldList);
    }
  }
});

Ext.define('NC.view.Platter', {
  extend: 'Ext.DataView',
  xtype: 'platter',


  config: {
    layout: 'vbox',
    height: '130px',
    itemCls: 'platter-item',
    itemTpl:  '<div class="thumb"><tpl if="image != null"><img src="{image}" /></tpl></div>'+
              '<div class="name">{name}</div>',
    inline: {
      wrap: false
    },
    scrollable: {
      direction: 'horizontal',
      directionLock: true
    }
  },

  setRecipeFilters: function(text) {
    var store = Ext.create('Ext.data.Store', {
      model: 'NC.model.Recipe',
      autoLoad: true,
      proxy: {
        type: 'jsonp',
        url: 'xxxxx',
        callbackKey: 'callback',
        extraParams: {
          // credentials & text filter param
        },
        reader: {
          type: 'json',
          idProperty: 'uuid',
        }
      }
    });

    this.setStore(store);
  }
});

Ext.define（'NC.view.PlatterDataItem'{
扩展：“Ext.dataview.component.DataItem”，
xtype:'platterdataitem'，
配置：{
布局：“vbox”，
高度：'130px'，
cls:‘拼盘’，
名单：{
},
数据映射：{
获取列表：{
setRecipeFilters:“文本”
}
}
},
applyList:函数（配置）{
返回Ext.factory（config，NC.view.Platter，this.getList（））；
},
updateList:函数（newList、oldList）{
如果（新列表）{
添加（newList）；
}
如果（旧列表）{
删除（旧列表）；
}
}
});
Ext.define（'NC.view.Platter'{
扩展：“Ext.DataView”，
xtype:'拼盘'，
配置：{
布局：“vbox”，
高度：'130px'，
itemCls:“拼盘项目”，
itemTpl:'+
“{name}”，
内联：{
包装：假
},
可滚动：{
方向：'水平'，
方向锁：正确
}
},
setRecipeFilters:函数（文本）{
var store=Ext.create（'Ext.data.store'{
模型：“NC.model.Recipe”，
自动加载：对，
代理：{
键入：“jsonp”，
url:'xxxxx'，
callbackKey:'callback'，
外部参数：{
//凭据和文本筛选器参数
},
读者：{
键入：“json”，
idProperty:“uuid”，
}
}
});
这个.设置存储（存储）；
}
});