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

Posted 2023-02-25

【中文标题】如何从商店动态获取图像到旋转木马煎茶触摸 2

【英文标题】：How to get dynamically images from the store to the carousel sencha touch 2

【发布时间】：2013-06-19 14:28:47

【问题描述】：

我正在尝试从商店获取图像，并控制图像的数量，并为每个轮播显示 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');

);

【参考方案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
);