Question

我试图从商店获取图像，并控制图像的数量，并为每个轮播显示12个图像，所有动态都取决于商店中的图像数量，如果它高达ex：12，为其余的创建另一个旋转木马...... 但我试图从商店获取图像并将其加载到旋转木马，但我的视图是空的，没有任何东西是diplaying ..

模特：

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

}）;

Answer 1

在开始迭代之前，可能没有加载存储中的数据。为避免这种情况，您应始终在加载事件回调中使用数据。

您可以做两件事，在商店中添加加载侦听器并在其中执行轮播填充

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
});

如何动态获取从商店到旋转木马的图像触摸2

1 个答案: