0

ストアから画像を取得し、画像の数を制御し、カルーセルごとに 12 の画像を表示しようとしています。そのすべては、ストアの画像の数に動的に依存します。例: 12 までの場合、残りの他のカルーセル...しかし、ストアから画像だけを取得してカルーセルにロードしようとしましたが、ビューが空で、何も表示されません..

モデル:

  Ext.define("MyApp2.model.ApplicationModel", {
    extend: "Ext.data.Model",
    config: {
      //type:'tree',
      fields: [
        {name: 'id', type: 'auto'},
        {name: 'name', type: 'auto'},
        {name:'icon',type:'image/jpg'}
      ]
   } 
 });

店舗 ：

    var token=localStorage.getItem("access_token");
    Ext.define("MyApp2.store.ApplicationStore", {
    extend: "Ext.data.Store",
    requires: ["Ext.data.proxy.JsonP"],
    config: {
    model: "MyApp2.model.ApplicationModel",
    autoLoad: true,
    id :'ApplicationStr',
    proxy: {
      type: 'jsonp',
      url: 'http://mysite.com/api/applications?format=jsonp&access_token='+token,
      reader: {
        type: 'json',
        rootProperty: 'applications'
      }
    }

   }    
  });

     var store = Ext.create('MyApp2.store.ApplicationStore');
       store.getStore('ApplicationStr');

                myCarousel = Ext.getCmp('carouselid');
                store.each(function(record) {
                    myCarousel.add({
                        html: '<img src=' + record.get('icon') + '/>'
                    });
                });

景色 ：

  Ext.define('MyApp2.view.MainMenu', {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar', 'MyApp2.store.ApplicationStore', 'Ext.dataview.List', 'Ext.Img'],
alias: 'widget.mainmenuview',
config: {
    layout: {
        type: 'fit'
    },
    items: [{
            xtype: 'titlebar',
            title: 'My Apps',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Log Off',
                    itemId: 'logOffButton',
                    align: 'right'
                }
            ]
        },
        {
            xtype: "carousel",
            id: 'carouselid'


        }


    ],
    listeners: [{
            delegate: '#logOffButton',
            event: 'tap',
            fn: 'onLogOffButtonTap'
        }]
},
onLogOffButtonTap: function() {
    this.fireEvent('onSignOffCommand');
}

});

4

1 に答える 1

1

反復処理を開始する前に、ストア内のデータがロードされていない可能性があります。このようなケースを回避するには、ロード イベントのコールバックで常にデータを使用する必要があります。

ロードリスナーをストアに追加し、カルーセルの作成を行うという2つのことを行うことができます

listeners:{
    load: function( me, records, successful, operation, eOpts ){ 
        console.log("data loaded", records);
        myCarousel = Ext.getCmp('carouselid');
        for(var i=0; i<records.length; i++){
            myCarousel.add({
                html: '<img src=' + records[i].get('icon') + '/>'
            });
        }
    }
}

または、必要に応じて load を手動で呼び出し、次のようにコールバックで実行できます。

store.load({
    callback: function(records, operation, success) {
        myCarousel = Ext.getCmp('carouselid');
        for(var i=0; i<records.length; i++){
            myCarousel.add({
                html: '<img src=' + records[i].get('icon') + '/>'
            });
        }
    },
    scope: this
});
于 2013-06-20T05:30:08.067 に答える