如何将外部JSON的数据加载到轮播中

Question

伙计们。我已经开始使用Sencha Touch进行游戏了，并且在第一次尝试创建简单的应用程序（阅读JSON文件，然后将内容放入传送带单元格中（有6个应用程序））时，我碰壁了。

这里是到目前为止的代码：

Ext.setup({ 
icon: 'icon.png', 
glossOnIcon: false, 
phoneStartupScreen: 'phone_startup.png', 
onReady: function() { 

    var arena_zapad = new Ext.Component({ 
    title: 'Arena Zapad', 
    scroll: 'vertical', 
    tpl: [ 
     '<tpl for=".">', 
     '<div class="movie">', 
      '<div class="title"><h2>{title}</h2></div>', 
      '<div class="days">{days}</div>', 
     '</div>', 
     '</tpl>'   
     ]  
    }); 

    var refresh = function() { 
    Ext.util.JSONP.request({ 
     url: 'arena_zapad.json', 
     callbackKey: 'callback', 
     callback: function(data) { 
     arena_zapad.update(data)   
     } 
    }) 
    } 

    new Ext.TabPanel({ 
     fullscreen: true, 
     tabBar: { 
      dock: 'bottom', 
      layout: {pack: 'center'} 
     }, 
     animation: 'slide', 
     items: [{ 
      title: 'Movie Theaters', 
      iconCls: 'monitor2', 
      xtype: 'carousel', 
      items: [ 
       { html: "Arena Mladost", 
       cls: 'card card2' 
       // I want the json data here instead of html text 
       },{ 
       html: 'Arena West', 
       cls: 'card card2' 
      },{ 
       html: 'Арена The Mall', 
       cls: 'card card3' 
      },{ 
       html: 'Cineplex', 
       cls: 'card card3' 
      },{ 
       html: 'Cinema City', 
       cls: 'card card3' 
      },{ 
       html: 'M-TEL IMAX', 
       cls: 'card card3' 
      }] 
     }, { 
      title: 'Movies', 
      html: 'Movies', 
      iconCls: 'video_black2', 
      cls: 'card card1' 
     }, { 
      title: 'Premier', 
      html: 'Premier', 
      iconCls: 'photo3', 
      cls: 'card card3' 
     }, { 
      title: 'Favourites', 
      html: 'Favourites', 
      iconCls: 'favorites', 
      cls: 'card card1' 
     }, { 
      title: 'About', 
      html: 'About', 
      iconCls: 'info2', 
      cls: 'card card5' 
     }] 
    }); 
} 

}）;

这里是JSON文件：

{ 
"movies": [ 
    { 
     "days": "Digital: 12:15, 14:15, 16:15, 18:15, 20:15, 22:15 35MM: 11:15, 13:15, 15:15, 17:15, 19:15, 21:15, 23:15", 
     "title": "TILT" 
    }, 
    { 
     "days": "9 февруари (сряда), 13:10, 15:30, 17:50, 19:00, 20:10, 21:20, 22:30", 
     "title": "Бурлеска" 
    }, 
    { 
     "days": "9 февруари (сряда), 12:00, 16:15", 
     "title": "Запознай се с малките" 
    } 
] 

}

所以基本上我想加载该文件，分析它，并把它放在第一旋转木马“细胞”（后来填充其他“细胞”）。我已经看过文档，但我不知道如何去做。任何帮助将不胜感激。

在此先感谢。

Answer 1

如果您位于同一个域中，则无需使用JSONP加载。只需使用Ext.Ajax.request。有一个从xml加载轮播内容的例子，这个想法是一样的。

Answer 2

你看过这个例子吗？ http://www.netmagazine.com/tutorials/build-ipad-app-sencha-touch

非常深入的教程，在构建一个应用程序从另一个来源（我认为它的Youtube，不记得）拉数据，并填充约48个缩略图可以点击覆盖 - 非常酷。

Si