PDA

View Full Version : Dynamic items in Ext.Carousel stop showing image after a few calls?



jaypompano
25 Feb 2011, 1:00 PM
Wired up a TouchGridPanel in a TabPanel. On itemtap I'm removeAll() the panel where the Carousel sits and rebuilding it each time. Works really well till about the 6th or 7th time I tap a new row in the grid and jump over to the carousel. Results are no errors, but image doesn't show after a few times. Possibly I'm not destroying something responsibly and causing degradation? Perhaps some refresh call I need? Can't put my finger on it.

UPDATE: this only happens on the iPad. It does not occur on my Chrome PC browser.



/////////////// grid on tab1 /////////////

var grid = new Ext.ux.TouchGridPanel({
store: store,
colModel: getcolModel(JSON),
id: 'TouchGridPanelGrid'
});

grid.on('itemtap', function (list, index, item, e) {
//open the document
var store = Ext.getCmp('TouchGridPanelGrid').store;
var record = store.getAt(index);
var recordData = record.data;

iFortisBlue.View.ClearPanel(); //clears the items in the panel holding the carousel...
iFortisBlue.View.LoadViewPanel(recordData);
Ext.getCmp('bottomTabPanel').setActiveItem(2);
});

grid.on('itemdoubletap', function (list, index, item, e) {
//edit the index data
iFortisBlue.Data.ClearPanel();//clears the items in the indexdata panel...
iFortisBlue.Data.LoadIndexData();
Ext.getCmp('bottomTabPanel').setActiveItem(3);
});
///////////////////////////////////////////

/////////////// grid on tab2 /////////////
var loadViewPanel = function (recordData) {
//...
//...
//...
var populateCarousel = function (JSON) {

var carouselItems = [];

for (var i = 0; i < JSON.DocumentResults.Documents[0].RenderedImages.Files.length; i++) {
var carouselItemRow = {
html: "<div style='text-align:center;'><img width='60%' src='" +
"../userclient/" +
JSON.DocumentResults.Documents[0].RenderedImages.DocumentPath + "/" +
JSON.DocumentResults.Documents[0].RenderedImages.Files[i] +
"'/></div>'"
};

carouselItems[i] = carouselItemRow;
}

var carousel = new Ext.Carousel({
fullscreen: true,
centered: true,
scroll: 'vertical',
layout: {
type: 'card',
align: 'stretch'
},
// defaults: {
// flex: 1
// },
items: [carouselItems]
});

viewPanel.add(carousel);
carousel.doComponentLayout();
viewPanel.doLayout();

};

var clearPanel = function () {
viewPanel.removeAll(true);
};

var viewPanel = new Ext.form.FormPanel({
items: [],
fullscreen: true//,
//layout: {
// type: 'hbox',
// align: 'stretch'
// },
});

kalbster
9 Mar 2011, 7:30 AM
There is a 10 MB limit on the ipad for a session. No joke. We had the same problem with our Carousel. You can watch the heap size change in google chrome developer tools under the profiles tab. Follow along with your ipad. Once that heap size gets to 10mb, the ipad will display blank images, but chrome continues on. Just one of the many reasons Android is far superior to iOS. You need to completely reload the page with parameters to your new carousel. For example:


function handlePresentationSelect(d,a,r){

var cid = a[0].data.cid;
document.location.href = 'index.cfm?ACTION=HOME&CARD=PRESENTATION&cid=' + cid;


}

jaypompano
25 Mar 2011, 5:41 AM
And here I thought it was something I did :)

Hey man thanks alot. I'll try your snippet soon. Much obliged...

Hertz
25 Mar 2011, 6:41 AM
This was extremely useful to me:
http://stackoverflow.com/questions/2986039/ipad-iphone-browser-crashing-when-loading-images-in-javascript

What worked for me was replacing images src with base64 encoded images before removing them from the carousel and anywhere else in the app where it could help on performance.

But there's a lot of useful info in that link that might work for you.

jaypompano
14 Apr 2011, 10:36 AM
Very strange, but it appears that after the upgrade to 1.1.0 I can't reproduce it now. But thanks because I'll still keep this solution in mind...