динамическое создание карусели с помощью sencha touch2

У меня есть следующий пример приложения MVC, пытающегося динамически создавать карусель с источником изображения, полученным с некоторого удаленного URL-адреса, когда я запускаю приложение, я не вижу никаких изображений, добавленных к моему карусельному представлению, пожалуйста, может ли кто-нибудь выделить, где я ошибаюсь ?

Код модели:

Ext.define('Sencha.model.ImageModel', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            'id', 'title', 'link', 'author', 'content',
            {
                name: 'image',
                type: 'string',
                convert: function (value, record) {
                    var content = record.get('content'),
                        regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/,
                        match = content.match(regex),
                        src = match ? match[1] : '';

                    if (src != "" && !src.match(/\.gif$/)) {
                        src = "http://src.sencha.io/screen.width/" + src;
                    }

                    return src;
                }
            }
        ]
    }

});

Код магазина:

Ext.define('Sencha.store.ImageStore', {
    extend: 'Ext.data.Store',
    config: {
        model: 'Sencha.model.ImageModel',

        proxy: {
            type: 'jsonp',
            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.acme.com/jef/apod/rss.xml&num=20',

            reader: {
                type: 'json',
                rootProperty: 'responseData.feed.entries'
            }
        }
    }
});

Код контроллера:

Ext.define('Sencha.controller.CarouselController', {
    extend: 'Ext.app.Controller',
    config:
        {
            init: function () {
                var carousel = Ext.getCmp('imagecarousel');
                Ext.getStore('ImageStore').load(function (pictures) {
                    var items = [];
                Ext.each(pictures, function (picture) {
                        if (!picture.get('image')) {
                            return;
                        }

                        items.push({
                            xtype: 'apodimage',
                            picture: picture
                        });
                    });

                    carousel.setItems(items);
                    carousel.setActiveItem(0);
                });
            }
        }
});

Посмотреть код:

Ext.define('Sencha.view.CarouselView', {
    extend: 'Ext.Img',
    id:'imagecarousel',
    xtype: 'apodimage',

    config: {
        /**
        * @cfg {apod.model.Picture} picture The Picture to show
        */
        picture: null
    },

    updatePicture: function (picture) {
        this.setSrc(picture.get('image'));
    }
});

Код приложения.js:

Ext.Loader.setConfig({
    enabled: true
});
Ext.require([
    'Ext.carousel.Carousel',
    'Ext.data.proxy.JsonP'
]);


Ext.application({
    name: 'Sencha',
controllers: ['CarouselController'],
stores: ['ImageStore'],
models: ['ImageModel'],
//views:['CarouselView'],
  launch: function () {
        Ext.create('Sencha.view.CarouselView');
    }
});

carousel extjs sencha-touch sencha-touch-2
person mahesh    schedule 19.05.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Можно поконкретнее, что не работает. Попробуйте добавить console.logs в свой код и предоставить нам результаты, например размер элементов в конце Ext.each и тому подобное.

Моей первой идеей было бы использовать функцию обратного вызова store.load :

Ext.getStore('ImageStore').load(
  callback: function (pictures) {
  var items = [];
  Ext.each(pictures, function (picture) {
    if (!picture.get('image')) {
      return;
    }
    items.push({
      xtype: 'apodimage',
      picture: picture
    });
  });

  carousel.setItems(items);
  carousel.setActiveItem(0);
});

Надеюсь это поможет

person Titouan de Bailleul    schedule 19.05.2012
comment
Спасибо за ответ, я пытаюсь следовать примеру, показанному в этом URL-адресе: edspencer.net/2012/02/, я немного переработал код, чтобы сделать мой файл app.js минимальным, я ввел контроллер и написал свою функцию привязки над ними, я просто хотел знать, как лучше всего этого добиться? - person mahesh; 21.05.2012
comment
У меня такая же проблема, но я не могу найти решение, как создать карусель с динамическими данными. посетите: stackoverflow.com/ вопросы/18075538/ - person ; 08.08.2013