如何在我的Sencha Touch应用程序中优化内存？

Question

我刚开始学习Sencha Touch，至今我都很喜欢它。我已经开始创建缩略图旋转木马画廊，并在弹出窗口时触摸每个缩略图。到目前为止，它的效果如预期。不过，我意识到我编码的方式可能不是最佳做法。我看过所有的教程视频。

基本上，我已经添加了一个事件监听器到每个缩略图（到目前为止我有8个缩略图和8个监听器）......这会触发8个单独的弹出窗口。

我认为必须有一个更好的方法来做到这一点，也许有一个监听器的旋转木马的身体，1可能弹出一个模板函数，从其他地方调用变量。这是否是正确的做法？我还在某处读取以节省内存，最好在侦听器之后立即定义弹出窗口，以便它不会立即加载。

这里是我的弹出窗口之一的代码（我已经定义了其中8个）：

var popup1 = new Ext.Carousel({ 
     floating: true, 
     modal: true, 
     centered: true, 
     padding: 5, 
     width: 800, 
     height: 600,    
     dockedItems: [ 
      { 
       xtype: 'toolbar', 
       dock: 'top', 
       title: 'Slide 1', 
      } 
     ], 
     items: [ 
      { 
       html: 'This is a test', 
       }, { 
       title: 'Tab 2', 
       html: '<img src="cricket.jpg"/>', 
       }, { 
       title: 'Tab 3', 
       html: '3' 
       }] 
      }); 

，这里是我的旋转木马代码：

var carousel1 = new Ext.Carousel({ 
     defaults: { 
      cls: 'card' 
     }, 
     items: [{ 
      layout: { 
       type: 'hbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       flex: 1, 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        flex: 1, 
        html: '<img src="1.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup1.show('pop'); 
      }); 
     } 
    } 
       },{ 
        flex: 1, 
        html: '<img src="2.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup2.show('pop'); 
      }); 
     } 
    } 
       }] 
      }, 

       { 
       flex: 1, 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        flex: 1, 
        html: '<img src="3.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup3.show('pop'); 
      }); 
     } 
    } 
       },{ 
        flex: 1, 
        html: '<img src="4.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup4.show('pop'); 
      }); 
     } 
    } 
       }] 
      }, 
      { 
       flex: 1, 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        flex: 1, 
        html: '<img src="5.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup5.show('pop'); 
      }); 
     } 
    } 
       },{ 
        flex: 1, 
        html: '<img src="6.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup6.show('pop'); 
      }); 
     } 
    } 
       }] 
      }, 

      { 
       flex: 1, 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [ 
       { flex: 1, 
        html: '<img src="7.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup7.show('pop'); 
      }); 
     } 
    } 
       }, 
       { flex: 1, 
        html: '<img src="8.jpg" />', 
        listeners: { 
     afterrender: function(c){ 
      c.body.select('img').on('click', function(e, t){ 
       popup8.show('pop'); 
      }); 
     } 
    } 

       }  ] 
      } 


      ]}, 
     ] 
    }); 

我会过得更好把你认为听众之后弹出代码？

非常感谢，

西蒙

Answer 1

做多一点阅读后，看来我需要更好地了解事件代表团。

我很确定最好的做法是将1个监听器放在传送带上，而不是每个拇指上的多个点击监听器。煎茶提到这样的事情：

listeners: { 
body: { 
    click: myHandler, 
    delegate: 'img' 
} 
} 

...所以你觉得把这个监听器是在传送带的上方，该位之后的最佳地点？

var carousel1 = new Ext.Carousel({ 
    defaults: { 
     cls: 'card' 
    }, 

最后，我想填充使用AJAX和TPL（模板）的缩略图，但我没有带得那么远呢！

:-)

硅