Mostrar una lista de JSON anidada: Sencha Touch 2

Question

tengo una lista que muestra una lista de restaurantes con el logotipo del restaurante, etc.

La vista

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('') 
    } 
}); 

Al tocar en el restaurante quiero que muestre otra lista basada en el elemento tocado.

La segunda vista

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

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

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

Los modelos

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

La tienda

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

El 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" 
     }] 
    }] 
} 

quiero mostrar una lista de opciones de menú (elemento, artículo, material ...) para el selectedbut restaurante cuando utilizo una lista anidada Tengo que usar la misma plantilla que la anterior lista que no se ajusta a mis necesidades. En este momento recibo la cantidad correcta de artículos pero nada muestra. ¿Puedes ayudarme con dónde me estoy equivocando, gracias?

Answer 1

Antes de llegar a la solución, aquí hay algunos problemas con su código (que deben ser corregidos antes de que la solución funcionará):

• En su configuración de proxy dentro de la tienda Contacts, la config para el roog de su JSON es rootProperty, no root.

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

  También podría simplemente poner este código dentro de su modelo, ya que usted ya puso una configuración de proxy allí. Éstos son tanto fusionado (debe estar dentro de su modelo, y quitar proxy de la tienda):

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

• Nombres de modelo siempre deben ser singulares, ya que representan un objeto. Por lo tanto, use Menu, no Menus.

• Necesita requerir cualquier clase que use dentro de la clase que las utiliza. Por ejemplo, se necesita la clase Sencha.model.Menu dentro de la clase Sencha.model.Contact, por lo que añadir que dentro de la propiedad requires dentro Contact.js:

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

• Es necesario utilizar associationKey en su asociación hasMany ya que normalmente se vería para menus (generado a partir de el nombre del modelo), pero en su JSON es menu.

• hasMany y belongsTo las configuraciones deben estar dentro del bloque config dentro de sus modelos.

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

En cuanto a la solución :) - puede modificar su itemTpl dentro de su lista para mostrar conexos para el registro que se muestra. Para ello, puede utilizar:

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

Así, en su caso, se puede hacer algo como esto:

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

Aquí es una descarga de un proyecto (generada usando las herramientas del SDK) que incluye una demostración de esto, utilizando principalmente su código: http://rwd.me/FS57