PDA

View Full Version : Using listeners to sort a tabPanel's lists.



RyanFreng
24 Feb 2011, 9:22 AM
Finally making some headway but now I'm stuck. All i currently get is two identical lists. When you click on the tab i want the list stores to be filtered. I can't find anything helpful on filtering in this manner, or any details about listeners (beyond one example for 'click' and 'dblclick').

Here's my code:


//stores
LibraryStore = new Ext.data.Store({
model: 'Library',
sorters: 'name',
getGroupString : function(record){
return record.get('name')[0];
},
proxy: {
type: 'ajax',
url: '/libraries/api/libraries.js',
reader: {
type: 'json',
record: 'library'
}
},
autoLoad: true
});

librariesOpenNowList = new Ext.List({
store: LibraryStore,
height: '100%',
itemTpl: '<div class="contact"><strong>{name}</strong></div>',
grouped: true,
indexBar: true,
listeners: {
'load': function(){
LibraryStore.filter({property: 'is_open_now', value: /^((?!false).)*$/});
}
}
});

librariesAllList = new Ext.List({
store: LibraryStore,
height: '100%',
itemTpl: '<div class="contact"><strong>{name}</strong></div>',
grouped: true,
indexBar: true,
listeners: {
'load': function() {
LibraryStore.clearFilter();
}
}
});

librariesPanel = new Ext.TabPanel({
items: [{title: 'Open Now', items: [librariesOpenNowList]},{title: 'All', items: [librariesAllList]}]
});
I want the store filtering to happen when you click on a different tab but am open to other ideas for doing this. Any thoughts?

RyanFreng
24 Feb 2011, 1:00 PM
Any suggestions on how to actually get this to work? Any listener i swap in seems to have no effect, including 'click' and 'tap.' Is there a list of listeners somewhere and how they behave with different object types?

mitchellsimoens
24 Feb 2011, 1:24 PM
have you tried listening to the activate event on the child items of the TabPanel?


{
xtype: "list",
....
listeners: {
activate: function(list) {
var store = list.getStore();
store.filter("is_open_now", /^((?!false).)*$/);
}
}
}

RyanFreng
24 Feb 2011, 3:06 PM
Here's what i have and it doesn't seem to be working:



librariesOpenNowList = new Ext.List({
store: LibraryStore,
height: '100%',
itemTpl: '<div class="contact"><strong>{name}</strong></div>',
grouped: true,
indexBar: true,
listeners: {
activate: function(list) {
var store = list.getStore();
store.filter("is_open_now", true);
}
}
});


at least i'm not seeing anything happen. What the heck are the events that i can listen for anyway? I'm unable to find a list in any of the sencha touch documentation.

RyanFreng
24 Feb 2011, 3:25 PM
I found a link to a list of listening events: http://dev.sencha.com/deploy/touch/docs/?class=Ext.Component

I do see a reaction when i use 'beforerender' but that is only for the first time it's rendered. Each time i switch back it just shows the previously rendered card. 'beforeactivate' and 'beforeshow' don't seem to work. I'll work my way down and see if anything starts working as it seemingly should.

Current code:



librariesOpenNowList = new Ext.List({
store: LibraryStore,
height: '100%',
itemTpl: '<div class="contact"><strong>{name}</strong></div>',
grouped: true,
indexBar: true,
listeners: {
beforerender: function(list) {
Ext.Msg.alert('Title', 'This is not working', Ext.emptyFn);
var store = list.getStore();
store.filter("is_open_now", /(am|pm|hour)/);
}
}
});

RyanFreng
24 Feb 2011, 3:29 PM
Just realized the objects in the api list public events at the bottom of their specification. doh..

RyanFreng
25 Feb 2011, 8:51 AM
Ok, here's what's working somewhat now:



librariesOpenNowList = new Ext.List({
store: LibraryStore,
height: '100%',
itemTpl: '<div class="contact"><strong>{name}</strong></div>',
grouped: true,
indexBar: true,
listeners: {
beforerender: function(list) {
var store = list.getStore();
store.filter("is_open_now", /(am|pm|hour)/);
}
}
});

librariesAllList = new Ext.List({
store: LibraryStore,
height: '100%',
itemTpl: '<div class="contact"><strong>{name}</strong></div>',
grouped: true,
indexBar: true,
listeners: {
beforerender: function(list) {
var store = list.getStore();
store.clearFilter();
}
}
});

librariesPanel = new Ext.TabPanel({
listeners: {
beforecardswitch: function(list, newlist) {
if (newlist == librariesOpenNowList) {
var store = newlist.getStore();
store.filter("is_open_now", /(am|pm|hour)/);
} else {
var store = newlist.getStore();
store.clearFilter();
}
//Ext.Msg.alert(newlist.getComponent('text'), 'test', Ext.emptyFn);
}
},
items: [
{
title: 'Open Now',
items: [librariesOpenNowList]
},{
title: 'All',
items: [librariesAllList]
}]
});


The problem is that the 'beforecardswitch' event returns an 'object' of Ext.Component type and i don't know how to interact with:



( Ext.Container this, Ext.Component newCard, Ext.Component oldCard, Number index, Boolean animated )


How do i compare my 'newlist' item to the actual list i want to filter, 'librariesAllList' or 'librariesOpenNowList'? The comparison above doesn't work, nor does a 'getId()' method on them.

RyanFreng
28 Feb 2011, 7:00 AM
Anybody know how i can compare the 'newCard' object to actual Ext.List that is the card being switched in???

RyanFreng
28 Feb 2011, 9:17 AM
I was able to troubleshoot and find the problem through the use of the 'getId()' method. The beforecardswitch returns the newcard's container object. This means to compare the 'newCard' object to my Ext.List object i did the following:



librariesPanel = new Ext.TabPanel({
listeners: {
beforecardswitch: function(list, newlist) {
if (newlist.getComponent(0).getId() == librariesOpenNowList.getId()) {
var store = librariesOpenNowList.getStore();
store.filter("is_open_now", /(am|pm|hour)/);
} else {
var store = librariesAllList.getStore();
store.clearFilter();
}
//newlist.refresh();
//Ext.Msg.alert(newlist.getComponent('text'), 'test', Ext.emptyFn);
}
},
items: [
{
title: 'Open Now',
items: [librariesOpenNowList]
},{
title: 'All',
items: [librariesAllList]
}]
});


here's the important part:



if (newlist.getComponent(0).getId() == librariesOpenNowList.getId()) {


Hope this helps anyone not finding the documentation I wasn't able to find =)