显示从嵌套的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