Как оптимизировать память в моем приложении Sencha Touch?

Я только начал изучать 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');
            });
        }
    }

                }      ]
             }   


            ]},
         ]
    });

Как вы думаете, было бы лучше поставить код всплывающего окна после слушателя?

Большое спасибо,

Саймон