PDA

View Full Version : Removing Items from a panel



FullThrottle
6 Dec 2011, 9:34 AM
I'm having trouble removing items from a panel and having the change reflected in the DOM.

I have tried...


var photoViewer = Ext.getCmp('photoViewerPanel');


for(var i = 0; i < photoViewer.items.length; i++)
{
photoViewer.remove(photoViewer.items[i], true);
}


as well as just using a removeAll(true);

No matter what I try when I revisit the Panel I see the old items. Any advice?

rdougan
6 Dec 2011, 9:52 AM
Could you make a simple test case of this in action please? I cannot reproduce it.

FullThrottle
6 Dec 2011, 9:56 AM
This is my Main Panel for this "page"


Ext.define('Mobile.view.PatientPhotoViewer', {
extend: 'Ext.Panel',
xtype: 'patientPhotoViewer',
id: 'patientPhotoViewer',
config: {
layout: 'fit',
items: [{
docked: 'top',
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Back',
iconMask: true,
iconCls: 'arrow_left',
handler: function()
{
Ext.getCmp('mainPanel').setActiveItem(3);
}
},
{ xtype: 'spacer' },
{ xtype: 'label', html: '<font color="white"><h1>Patient</h1></font>' },
{ xtype: 'spacer' },
{
xtype: 'button',
text: 'Log Out',
handler: function()
{
Ext.getCmp('loginForm').reset();
Ext.getCmp('mainPanel').setActiveItem(0);
}
}]
},
{
layout: 'fit',
xtype: 'panel',
scrollable: true,
autoDestroy: true,
id: 'photoViewerPanel'
}]
}
});


This is how I'm populating the inner Panel "photoViewerPanel"


var storeItem = Ext.getCmp('patientPhotoDataView').getStore().getById(parseInt(item.attributes['id'].value));
var photoViewer = Ext.getCmp('photoViewerPanel');


for(var i = 0; i < photoViewer.items.length; i++)
{
photoViewer.remove(photoViewer.items[i], true);
}




photoViewer.add({html: '<div><img id="Image" src="data:image/jpeg;base64,' + storeItem.data.customImage + '" /></div>'});


Essentially there is a page before this page that navigates to a photo from a thumbnail gallery and this page shows a fullscreen image. If you click the back button, and then reclick the same picture you see it twice. Every time you click the picture thumbnail I execute the above code which removes all the items from the viewerPanel and then adds 1 image.

I will try to create something more simple for you, but maybe you'll see a flaw in what I did in the meantime

FullThrottle
6 Dec 2011, 10:44 AM
Here is a test page that reproduces this perfectly. A panel with a toolbar and a child panel, when you push refresh it removes all items in the child panel and then adds one image to it. As you keep pushing refresh it keeps adding images without removing any. This is my exact problem




Ext.Loader.setConfig( {enabled: true });


Ext.application({
name: 'test',


launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
items: [{
docked: 'top',
xtype: 'toolbar',
items: [{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
handler: function()
{
var photoViewer = Ext.getCmp('testPanel');


for(var i = 0; i < photoViewer.items.length; i++)
{
photoViewer.remove(photoViewer.items[i], true);
}




photoViewer.add({html: '<div><img id="xrayImage" src="http://camp.hubspot.com/Portals/14209/images/how-to-do-landing-page-testing.png" /></div>'});
}
}]
},
{
layout: 'fit',
xtype: 'panel',
id: 'testPanel'
}]
});
}
});

FullThrottle
6 Dec 2011, 11:50 AM
:)) I just realized the picture I chose for the demo was kind of ironic... my bad

rdougan
6 Dec 2011, 3:51 PM
Ok, the problem with your code is that you are looping through photoViewer.items.items, but then trying to remove photoViewer.items[i] (notice you are missing an 'items').

Anyway, I tested it with PR2, and photoViewer.removeAll() works in your example, so I would use that. Also, when accessing items in Touch 2, use getters; so getItems and getInnerItems.

FullThrottle
6 Dec 2011, 4:28 PM
I might not have PR2, because like I said I did try removeAll and I made sure to pass true so it would destroy the old elements, and I also tried the autoDestroy property. I will try this again when I get back to work tomorrow, thanks for the help.

By any chance can you link the correct link to PR2 so I can update my files as well just to make sure I'm on the right release

rdougan
6 Dec 2011, 10:19 PM
The bottom of this page: http://www.sencha.com/products/touch/download/

FullThrottle
7 Dec 2011, 6:47 AM
Thx, removeAll worked. I have no idea why I didn't see it yesterday but I appreciate your help