View Full Version : Optimising memory in big carousel - how to destroy popups?

7 Jan 2012, 4:40 AM

I'm developing a fairly large app with card layout, and on the first card I will have a fairly large multipage carousel with 32 thumbnails (12 per page). I realise that defining 32 separate popups separately is not the best way but it is the only way I can get working at the moment as I am still learning templates. I define all 32 like this:

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="bg.jpg"/>', },
{ title: 'Tab 3', html: '3' }] });

I still hope to optimize the memory as much as possible as I am conscious I am not doing it in the most optimal way.

My question is, can I save memory by adding the popup code after the click listener on each item of my carousel here to save memory, instead of declaring all 32 popups above my carousel in the code? Here is a bit of my carousel:

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'); <-----CAN I PUP THE POPUP HERE TO SAVE MEMORY? }); } } },.....code snipped from her

How about destroying the modal popup after? Can I also add
popup.destroy(); after each popup too? I'm not sure exactly how to write the destroy code.

I wish I understood xtypes too as I think this would save me more memory but I still dont understand it properly!

Thanks a lot,


7 Jan 2012, 6:10 AM
You should definitely only create the popup when you need it, in this case on tap of the image. And yes, once the popup is hidden, you should destroy it.

Your listener on the carousel can be a little more optimized:

listeners : {
el : {
delegate : 'img',
tap : function() {....}