PDA

View Full Version : NestedList getDetailCard trouble



na8flush
13 Jul 2011, 7:54 AM
Hi, I'm having a bit of trouble using a Nested List and a detailCard. I currently have a nested list displaying a simple tree of categories of CDs. It looks like this:


LCMobile.views.CategoriesList = Ext.extend(Ext.Panel, {
layout: 'card',
items: categoriesList
});

var categoriesList = new Ext.NestedList({
title: 'Categories',
store: categoryStore,
displayField: 'title',
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
parentData = parent.attributes.record.data;
LCMobile.detailCard.update(itemData);
this.backButton.setText(parentData.title);
return LCMobile.detailCard;
}
});

And my detailCard looks like this:

LCMobile.detailCard = new Ext.Panel({
id: 'detailPanel',
layout: 'card',
scroll: 'vertical',
styleHtmlContent: true,
items: '',
tpl: ["<h3>{title}</h3>", "<img height='50px' width='50px' src='/images/covers/{sku}.jpg'>{description}" ]
});


Problem I am having is that the detailCard will show up once, and the back button will work, but it will only work one time, and error out after that. Says
Uncaught TypeError: Cannot read property 'style' of undefined

I'm pretty sure there's another step I'm missing somewhere not assigning the previous card, but I'm at a bit of a loss, and in the API the only thing I could find was about the prev() method for cards, and it only made me more confused. Can anyone point me in the right direction? Thanks!

na8flush
18 Jul 2011, 6:38 AM
Well, I think I traced down the problem. For some reason the detailcard was getting deleted after the first view, and not being recreated for the second time I tried to use it.

I traced this down step-by-step in the JS console, and the second time I saw that it had the isDeleted property set to true.

To fix it, I added this code to the detailCard:

listeners: {
beforeDestroy: function() {
return false; //for some reason, if i dont do this, the card wont get recreated after the first time
}
},

But I'm not sure that's the right way to go about this. If anyone has some insight into why this might be happening, that'd be great. I could even include a link to the app on our staging server if that would help. Thanks!

eyalfx
7 Sep 2011, 7:54 AM
I've had the same problem and it was driving me nuts.
na8flush (http://www.sencha.com/forum/member.php?290733-na8flush) , your solution totally works :)
I suppose the nested list is designed to delete the leaf card every time and recreate it again on the fly.
Thanks for your post.

myput
10 Oct 2011, 7:31 AM
Hey,

I tested your solution but it doesn't work for me. I have a list in nestedList, and i can display my list (in the detailPanel) one time, but when i do back and i come back .... Nothing.

here is my code:


getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
parentData = parent.attributes.record.data;
DirectoryItemListContainer.update(itemData);
this.backButton.setText(parentData.text);
return DirectoryItemListContainer;



WPApp.views.DirectoryItemListList = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
store: WPApp.stores.DirectoryItemListListStore
});


var DirectoryItemListContainer = new Ext.Panel({
id: 'DirectoryItemListContainer',
listeners: {
beforeDestroy: function() {
return false; //for some reason, if i dont do this, the card wont get recreated after the first time
}
},
layout: 'card',
scroll: 'vertical',
items: [WPApp.views.DirectoryItemListList]
});


i tried to put your code in my panel, but no effect. Where i must write it please?