Как загрузить данные из внешнего JSON в карусель - PullRequest
Новая
       25

Как загрузить данные из внешнего JSON в карусель

2 голосов
/ 09 февраля 2011

ребята. Я начал играть с 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": "Запознай се с малките"
    }
]

}

Так что в основном я хочу загрузить этот файл, разобрать его и поместить в первую "ячейку" карусели (а затем заполнить другие "ячейки"). Я посмотрел на документацию, но я не могу понять, как это сделать. Любая помощь будет оценена.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 22 августа 2011

Вы смотрели на этот пример? http://www.netmagazine.com/tutorials/build-ipad-app-sencha-touch

Очень подробное руководство по созданию приложения, которое извлекает данные из другого источника (я думаю, что это Youtube, не помню) и заполняет около 48 миниатюр, которые имеют оверлейные клики - очень круто.

Si

0 голосов
/ 12 февраля 2011

Нет необходимости использовать JSONP для загрузки, если вы находитесь в одном домене.Просто используйте Ext.Ajax.request.Есть пример загрузки содержимого карусели из xml, идея та же.

...