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

Posted 2023-02-25

【中文标题】Sencha Touch 2 嵌套模型和数据存储

【英文标题】：Sencha Touch 2 nested models and data stores

【发布时间】：2012-05-22 14:05:31

【问题描述】：

我什至不知道怎么问这个，但是就这样吧。

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

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',
      
    
  
);

现在，我想创建一个数据视图的数据视图。拼盘列表，每个都包含它的食谱列表：

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

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

提前致谢。

【参考方案1】：

这似乎并没有利用我认为 Sencha Touch 拥有的关联和存储结构，但即使在使recipes() 关联正确加载之后，我也无法做到这一点触发数据视图刷新。我花了太多时间在上面，所以我选择了一个不太优雅的解决方案。我将过滤器文本传递给 Platter 上的设置器，该设置器使用参数中的此过滤器设置它的存储。它至少有效！

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