1

次のサンプル 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'));
    }
});

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

1 に答える 1

1

何が機能しないかについて、より具体的にすることができます。コードに 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);
});

お役に立てれば

于 2012-05-19T22:45:23.883 に答える