View Full Version : Capturing tab change in TabPanel

1 Feb 2011, 12:03 PM
Hi all, I am exploring Sencha Touch, and really like the cross platform functionality I've seen thus far. I'm constructing a basic wireframe for an app, and have a in place which contains a DataView in the first tab. Of course, the DataView automatically loads from its store when the application is loaded. I would like to also load my store whenever this tab acquires focus during application use. The issue is, I am not sure how to grab my TabPanel instance, or more specifically my Toolbar, in order to register an event. I looked at events in the docs, but I just can't seem to put this together in my head. Am I headed in the wrong direction? Is this probably easier than I'm making it out to be?

Thanks for any assistance,

3 Feb 2011, 12:40 AM
Hi haylo75

I had a similar issue recently where I have a tabPanel with three dataviews, but wanted to change the sort order of the store on each tab click (A-Z, Most Recent, Most Viewed) without having to define three different stores, so here's what I did:

Example dataview included in the tabPanel:

var tabArticlesLatest = new Ext.DataView({
title: 'Latest',
store: storeTabArticles,
itemSelector: 'li.menu-item',
fullscreen: false,
listeners: {
activate: function () {
storeTabArticles.sort('datePublished', 'DESC')

This worked for me, using the listeners: activate within the dataview itself, I assume you can use yourStore.load() in the same place ?

hope this helps


3 Feb 2011, 10:51 AM
Frances - Thanks so much for this succinct example! I was a bit stymied as to how to set up a listener, and this really helps.

Funny thing, I noted that I could not use the DataView's defined "store" within activate, rather the equivalent of your "storeTabArticles" reference. I would have thought I could reference the store as defined in the DataView arguments.