Sencha Touch 2 - Ayuda de proxy JSONP, la plantilla siempre tiene nulo para los valores

Question

Tengo problemas para mostrar los datos reales en una lista de Sencha Touch 2. La lista debe estar poblada por una respuesta JSONP, y espero que aparezcan 2 filas. En cambio, obtengo una fila con 'null at null'.

Aquí está la URL que se envía:

http://some-server/data-fetcher.php?_dc=1331910031292&events=true&page=1&start=0 
    &limit=25&callback=Ext.data.JsonP.callback1 

Aquí está la respuesta JSONP:

Ext.data.JsonP.callback1({"data":[{"id":"4","name":"Sample Name 1", 
    "description":null,"location":"Sample Location 1", 
    "start_time":"2012-03-22 00:00:00","end_time":null},{"id":"5", 
    "name":"Sample Name 2","description":null,"location":"Sample Location 2", 
    "start_time":"2012-03-31 00:00:00","end_time":null}],"num_rows":2}); 

Aquí es mi modelo:

Ext.define('MyApp.model.Event', { 
    extend: 'Ext.data.Model', 
    config : { 
     idProperty: 'id', 
     fields : [ { 
      name : "id", 
      type : "int" 
     }, { 
      name : "name", 
      type : "string" 
     }, { 
      name : "description", 
      type : "string" 
     }, { 
      name : "location", 
      type : "string" 
     }, { 
      name : "start_time", 
      type : "date" 
     }, { 
      name : "end_time", 
      type : "date" 
     } ] 
    } 
}); 

Aquí está mi tienda:

Ext.define('MyApp.store.EventsOnline', { 
    extend : 'Ext.data.Store', 
    requires: ['MyApp.model.Event'], 
    config : { 
     model : 'MyApp.model.Event', 
     autoLoad : true, 
     proxy : { 
      type : 'jsonp', 
      url : 'http://some-server/data-fetcher.php', 
      reader : { 
       type : 'json', 
       root : 'data', 
       totalCount : 'num_rows' 
      }, 
      callbackKey : 'callback', 
      extraParams : { 
       'events' : true 
      } 
     } 
    } 
}); 

Aquí es mi opinión:

Ext.define('MyApp.view.Event', { 
    extend: 'Ext.Container', 
    config : { 
     layout : { 
      type : 'vbox', 
      align : 'stretch' 
     }, 
     fullscreen : true, 
     flex : 1, 
     items : [ 
      { 
       xtype : 'toolbar', 
       docked : 'top', 
       title : 'Events' 
      }, { 
       xtype : 'list', 
       flex : 1, 
       store : 'EventsOnline', 
       itemTpl : '{name} at {location}' 
      } 
     ] 
    } 
}); 

Lo que espero ver en mi lista es:

Sample Name 1 at Sample Location 1 
Sample Name 2 at Sample Location 2 

Y en lugar todo lo que veo es:

null at null 

¿Qué estoy haciendo mal ?

Editar: si importa, aquí están mi aplicación y el controlador:

Ext.Loader.setConfig({enabled : true}); 

Ext.application({ 
    name    : 'MyApp', 
    appFolder   : 'app', 
    controllers : ['Home'], 
    launch : function() { 
     window[this.getName()].app = this; 
    } 
}); 

Ext.define('MyApp.controller.Home', { 
    extend: 'Ext.app.Controller', 
    models: ['Event'], 
    stores: ['EventsOnline'], 
    views: ['Event'], 
    init: function() { 
     var me = this; 
     Ext.Viewport.add(Ext.create('MyApp.view.Event')); 
    } 
}); 

Answer 1

root : 'data', 
totalCount : 'num_rows' 

está en desuso. Uso:

rootProperty: 'data', 
totalProperty: 'num_rows' 

Asegúrese de que haya incluido Sencha Touch de sencha-touch-all-compat.js para el desarrollo. Informará en la consola del navegador todas las cosas obsoletas que use.

Answer 2

También estaba luchando por mostrar mi lista y buscar mucho en esto.

Finalmente consiguió mi respuesta después de cambiar esto en mi punto de vista:

extend: 'Ext.Container', 

a

extend:'Ext.navigation.View', 

me dio la idea de arriba del enlace de ejemplo a continuación!

Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

Ahora trabajo, feliz de ver mi primer ejemplo de trabajo MVC :)

espero que ayude a alguien.