Question

我刚刚开始学习Sencha Touch，到目前为止我喜欢它。我已经开始构建缩略图轮播库，并在触摸每个缩略图时显示弹出窗口。到目前为止一切顺利，它按预期工作。但是我意识到我编写一些东西的方式可能不是最好的做法。我观看了所有教程视频。

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

我认为必须有更好的方法来实现它，也许在旋转木马的主体上有一个监听器，并且可能有一个模板函数的弹出窗口，它调用来自其他地方的变量。这是正确的做法吗？我还读到了保存内存的地方，最好在监听器之后定义弹出窗口，这样它就不会立即加载。

这是我的一个弹出窗口的代码（我已经定义了其中的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个侦听器，而不是在每个拇指上放置多个单击侦听器。 Sencha提到了这样的事情：

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

...所以你认为放置这个听众的最佳位置是在旋转木马的顶部，在此之后？

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

最终我想使用AJAX和tpl（模板）填充缩略图，但我还没有那么远！

： - ）

的Si

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

1 个答案: