I. Explications

Une chose intéressante à noter sur l'utilisation de données imbriquées est que Ext va automatiquement donner à vos modèles enfants une clef étrangère vers le modèle parent.

Disons, par exemple, que vous avez un modèle Post (un article de blog) et un modèle Category. La relation est "plusieurs à plusieurs" (many-to-many). Dans votre base de données, vous aurez une table Post, une table Category et une relation PostCategory. Vous ne devrez probablement pas rendre visible la relation, c'est un concept de base de données, mais plutôt la rendre abstraite.

Au lieu de cela, vous aller retourner un article et sa liste de catégories au format json (voir la section suivante).

Vous pouvez récupérer, ajouter ou supprimer des catégories de la liste post.categories() (créée automatiquement en raison de l'association "contient plusieurs" (hasMany)).

II. Codes

Le modèle Post :

 
Sélectionnez
Ext.define('app.model.Post', {
  extend:'Ext.data.Model',
  fields:[
    {name:'id', type:'int'},
    {name:'title'},
    {name:'body'}
  ],
  proxy:{
    type:'ajax',
    url:'data/posts.json',
    reader:{
      type:'json',
      root:'posts'
    }
  },
  hasMany:[
    {
      name:'categories',
      model:'app.model.Category'
    }
  ]
})


Le modèle Category :

 
Sélectionnez
Ext.define('app.model.Category', {
  extend:'Ext.data.Model',
  fields:[
    {name:'id', type:'int'},
    {name:'name', type:'string'}
  ]
});


Les données json :

 
Sélectionnez
{
  "success":true,
  "posts":[
    {
      "id":1,
      "title":"hi",
      "body":"there",
      "categories":[
 {
   "id":1,
   "name":"hardware"
 },
 {
   "id":3,
   "name":"software"
 }
      ]
    },
    {
      "id":2,
      "title":"so",
      "body":"long",
      "categories":[
 {
   "id":1,
   "name":"hardware"
 },
 {
   "id":2,
   "name":"porn"
 }
      ]
    }
  ]
}


L'application :

 
Sélectionnez
Ext.Loader.setConfig({
    enabled: true
});
 
Ext.application({
    name: 'app',
    autoCreateViewport:false,
    enableQuickTips:false,
    requires:[
      'app.model.Post',
      'app.model.Category'
    ],
 
    launch: function() {
      app.model.Post.load(1, {
        success: function(record, op){
          console.log(record.categories())
        }
      })
    }
});

III. Remerciements

Cet article a été publié avec l'aimable autorisation de Neil McGuigan. L'article original peut être lu sur le blog ExtJS TutorialsExtJS Tutorials : Using nested data for many-to-many relationshipsUsing nested data for many-to-many relationships.
Je remercie également ram-0000 pour sa relecture rapide.