顯示從嵌套的JSON列表：煎茶觸摸2

Question

我有一個顯示的餐館列表以及餐廳的標誌列表等

視圖

Ext.define('Test.view.Contacts', { 
    extend: 'Ext.List', 
    xtype: 'contacts', 

    config: { 
     title: 'Stores', 
     cls: 'x-contacts', 

     store: 'Contacts', 
     itemTpl: [ 
      '<div class="headshot" style="background-image:url(resources/images/logos/{logo});"></div>', 
      '{name}', 
      '<span>{add1}</span>' 
     ].join('') 
    } 
}); 

當您點擊餐廳我希望它顯示基於項目點擊另一個列表。

第二視圖

Ext.define('Test.view.Menu', { 
    extend: 'Ext.List', 
    xtype: 'contact-menu', 

    config: { 
     title: 'Menu', 
     cls: 'x-contacts', 

     store: 'Contacts', 
     itemTpl: [ 
      '<div>{item}</div>' 
     ].join(''), 
    }, 
}); 

這些模型

Ext.define('Test.model.Contact', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'name', 
      'logo', 
      'desc', 
      'telephone', 
      'city', 
      'add1', 
      'post', 
      'country', 
      'latitude', 
      'longitude' 
     ], 
     proxy: { 
      type: 'ajax', 
      url: 'contacts.json' 
     } 
    }, 
    hasMany: { 
     model: "Test.model.Menus", 
     name: 'menus' 
    } 
}); 

Ext.define('Test.model.Menus', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [ 
      'item' 
     ] 
    }, 
    belongsTo: "Test.model.Contact" 
}); 

商店

Ext.define('Test.store.Contacts', { 
    extend: 'Ext.data.Store', 

    config: { 
    model: 'Test.model.Contact', 
    autoLoad: true, 
    //sorters: 'name', 
    grouper: { 
     groupFn: function(record) { 
     return record.get('name')[0]; 
     } 
    }, 
    proxy: { 
     type: 'ajax', 
     url: 'contacts.json', 
     reader: { 
     type: 'json', 
     root: 'stores' 
     } 
    } 
    } 
}); 

的JSON

{ 
    "stores": [{ 
     "name": "Science Gallery", 
     "logo": "sciencegallery.jpg", 
     "desc": "Get some food", 
     "telephone": "016261234", 
     "city": "Dublin", 
     "add1": "Pearse Street", 
     "post": "2", 
     "country": "Ireland", 
     "latitude": "53.34422", 
     "longitude": "-6.25006", 
     "menu": [{ 
      "item": "SC Sandwich" 
     }, { 
      "item": "SC Toasted Sandwich" 
     }, { 
      "item": "SC Panini" 
     }, { 
      "item": "SC Ciabatta" 
     }, { 
      "item": "SC Burrito" 
     }] 
    }, { 
     "name": "Spar", 
     "logo": "spar.jpg", 
     "desc": "Get some food", 
     "telephone": "016261234", 
     "city": "Dublin", 
     "add1": "Mayor Street", 
     "post": "2", 
     "country": "Ireland", 
     "latitude": "53.34422", 
     "longitude": "-6.25006", 
     "menu": [{ 
      "item": "Spar Sandwich" 
     }, { 
      "item": "Spar Toasted Sandwich" 
     }, { 
      "item": "Spar Panini" 
     }, { 
      "item": "Spar Ciabatta" 
     }, { 
      "item": "Spar Burrito" 
     }] 
    }] 
} 

我想，以示對餐廳selectedbut的菜單項列表（項目，項目，項目...）當我使用嵌套列表我必須使用相同的模板，因爲以前不適合我需求的清單。目前，我獲得了適量的物品，但沒有顯示。你能幫我解決我要去哪裏的錯誤，謝謝。

Answer 1

之前，我的解決方案，這裏有你的代碼的幾個問題（這需要修復之前，該解決方案將工作）：

• 在代理配置的Contacts商店內，該配置對於你的JSON的roog是rootProperty，而不是root。

  proxy: { 
      type: 'ajax', 
      url: 'contacts.json', 
      reader : { 
       type : 'json', 
       rootProperty : 'stores' 
      } 
  } 
  

  你也可以只把這個代碼模型裏面，因爲你已經把一個代理配置在那裏。這裏都是合併（應該是你的模型中，並從存儲中刪除代理）：

  proxy: { 
      type: 'ajax', 
      url: 'contacts.json', 
      reader : { 
       type : 'json', 
       rootProperty : 'stores' 
      } 
  } 
  

• 型號名稱應該始終爲單數，因爲它們代表了一個對象。所以請使用Menu，而不是Menus。

• 你需要在你使用的班級內部使用你需要的任何班級。例如，你需要的Sencha.model.Contact類中的Sencha.model.Menu類，因此它添加了requires屬性裏面裏面Contact.js：

  Ext.define('Sencha.model.Contact', { 
      extend: 'Ext.data.Model', 
      requires: ['Sencha.model.Menu'], 
  
      ... 
  }); 
  

• 你需要在你的hasMany關聯使用associationKey因爲通常它會尋找menus（從產生型號名稱），但在您的JSON中是menu。

• hasMany和belongsTo配置應該在config模塊內部。

  Ext.define('Sencha.model.Contact', { 
      extend: 'Ext.data.Model', 
      requires: ['Sencha.model.Menu'], 
  
      config: { 
       ... 
  
       hasMany: { 
        model: "Sencha.model.Menu", 
        associationKey: 'menu' 
       } 
      } 
  }); 
  

對於解決 :) - 你可以修改你itemTpl內備案，以顯示相關聯的列表被顯示。要做到這一點，你可以使用：

<tpl for="associatedModelName"> 
    {field_of_associated_model} 
</tpl> 

所以你的情況，你可以做這樣的事情：

itemTpl: [ 
    '{name}', 
    '<div>', 
     '<h2><b>Menu</b></h2>', 
     '<tpl for="menus">', 
      '<div> - {item}</div>', 
     '</tpl>', 
    '</div>' 
].join('') 

這裏是一個項目（使用SDK工具生成），包括下載這是一個演示，主要使用您的代碼：http://rwd.me/FS57