2012-05-22 39 views
10

我幾乎不知道如何去問這個問題,但是這裏就是這樣。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', 
     } 
    } 
    } 
}); 

現在,我想創建一個數據視圖的dataviews。盤片的列表,每個都包含它的食譜清單:

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 = noodle。

在此先感謝。

回答

0

這當然似乎沒有利用我認爲Sencha Touch有的關聯和存儲結構,但是即使進展到讓recipes()關聯正確加載的時候,我也無法讓它觸發要刷新的數據視圖。我花了太多時間在上面,所以我選擇了一個不那麼優雅的解決方案。我將過濾器文本傳遞給Platter上的setter,它將這個過濾器存儲在參數中。它至少起作用!

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); 
    } 
}); 
相關問題