PDA

View Full Version : Trouble refreshing TabPanel with doComponentLayout



grundlebug
28 Feb 2011, 8:30 AM
Hello all. I am having trouble getting a tab panel to refresh using doComponentLayout as part of a function that adds items to the panel.

My web app is a basic information display app, like the Cactus example. There are just two tabs. I have a homeTab with all the content. On each card within that tab there is a bookmark button in the toolbar. I also have a favoritesTab that displays the bookmarks.

The function that handles the bookmarks stores the relevant card id and title in local storage - or removes it if the bookmark is being removed - then removes the current items from the favoritesTab, calls another function to retrieve the new list of bookmarks, regenerates the items, and then calls doComponentLayout to refresh the favoritesTab. Here's the code for the bookmark button and favoritesTab:


function addFav() {
currentCard = homeTab.getActiveItem();
if (localStorage.getItem(currentCard.id) == null) {
var favInfo = [];
favInfo[0] = currentCard.id;
favInfo[1] = currentCard.title;
localStorage.setItem(favInfo[0],favInfo.join(";"));
} else {
localStorage.removeItem(currentCard.id);
}
favoritesTab.removeAll();
favoritesTab.insert(0, getFavs());
favoritesTab.doComponentLayout();
}

var favoritesTab = new Ext.Panel({
fullscreen: true,
iconCls: 'favorites',
title: 'Favorites',
layout: {
type: 'auto',
},
scroll: 'vertical',
defaults: {
xtype: 'button',
cls: 'button-menu',
},
items: getFavs(),
dockedItems: [favoritesBar],
})

The first time I navigate to favoritesTab, everything works great. But if I bookmark a new card, when I return to the favoritesTab, all the items are missing. If I call favoritesTab.doComponentLayout() from the console, the refreshed list of items shows up.

Calling favoritesTab.doComponentLayout at the end of addFav() doesn't seem to be doing the trick. How do I get a refreshed view of favoritesTab to be loaded after a bookmark is added or removed?

I'm a javascript and Sencha neophyte. Any suggestions are appreciated. Thanks.

pothibo
28 Feb 2011, 12:32 PM
I've been having similar issue, browsing the source code, I figure out that the doComponentLayout() method is not recursive, it will only call doComponentLayout on direct children.

grundlebug
28 Feb 2011, 2:01 PM
Does that mean it will only work on the active tab?

pothibo
28 Feb 2011, 2:10 PM
Well it means that will only refresh the direct child, so first you tabs need to be direct children of the navbar. I saw that adding/removing items on any panel was a pain in the ass to get working. So I finally decided to ditch most of the Ext.Containers layout system and directly injected Ext.Containers (buttons, etc) to the html instead using the render method.

I think that the XTemplate is pretty useful and I reckon that using only that should be the way to go. all the items/docked items are kinda useless since they are wrappers to CSS classes underneath.

grundlebug
28 Feb 2011, 3:19 PM
Well, if I can get this one little bit working I'm more or less finished with the structure of the app using the Ext.Containers so I'd love to work this out.

I'm wondering if there is a listener event I can attach to the container to fire the doLayout method each time the favoritesTab is activated, but I haven't had much luck getting that to work. I'll see if I can round up that code. I may have deleted it.

grundlebug
28 Feb 2011, 7:09 PM
Answered my own question. I just had to keep working on the listeners. I found the right configuration. Here's the new code:


function addFav() {
currentCard = homeTab.getActiveItem();
if (localStorage.getItem(currentCard.id) == null) {
var favInfo = [];
favInfo[0] = currentCard.id;
favInfo[1] = currentCard.title;
localStorage.setItem(favInfo[0],favInfo.join(";"));
} else {
localStorage.removeItem(currentCard.id);
}
}

var favoritesTab = new Ext.Panel({
fullscreen: true,
iconCls: 'favorites',
title: 'Favorites',
layout: {
type: 'auto',
},
scroll: 'vertical',
defaults: {
xtype: 'button',
cls: 'button-menu',
},
dockedItems: [favoritesBar],
})

favoritesTab.addListener(
'show',
function() {
favoritesTab.removeAll();
favoritesTab.insert(0,getFavs());
favoritesTab.doComponentLayout()
},
{element: 'body'}
)


Instead of trying to do the removeAll() and doComponentLayout() methods from within another panel, I tied them to the 'show' event for the favoritesTab. Now it clears the items, and refreshes them from localStorage every time the favoritesTab is shown.