PDA

View Full Version : List with docked 'details' panel



dloomer
1 Nov 2010, 9:35 AM
I'm trying to do something similar to the MLB iPhone app, where you have a list of items and if you tap one of the items, a docked panel at the bottom is updated with additional details on the item. I'm having a tough time getting this working perfectly in my app, and can reproduce the issue using a modified version of the List demo from Kitchen Sink. basically, upon issuing the update() method on the docked panel, in the console I see the error:

TypeError: Result of expression 'ct' [null] is not an object. dev.sencha.com/deploy/touch/ext-touch-debug.js:26435 (http://dev.sencha.com/deploy/touch/ext-touch-debug.js)


And then some things, namely scrolling, start behaving strangely. Here is my code:



Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var listStore = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Julio', lastName: 'Minich'},
{firstName: 'Tania', lastName: 'Ricco'},
{firstName: 'Odessa', lastName: 'Steuck'},
{firstName: 'Nelson', lastName: 'Raber'},
{firstName: 'Tyrone', lastName: 'Scannell'},
{firstName: 'Allan', lastName: 'Disbrow'},
{firstName: 'Cody', lastName: 'Herrell'},
{firstName: 'Julio', lastName: 'Burgoyne'},
{firstName: 'Jessie', lastName: 'Boedeker'},
{firstName: 'Allan', lastName: 'Leyendecker'},
{firstName: 'Javier', lastName: 'Lockley'},
{firstName: 'Guy', lastName: 'Reasor'},
{firstName: 'Jamie', lastName: 'Brummer'},
{firstName: 'Jessie', lastName: 'Casa'},
{firstName: 'Marcie', lastName: 'Ricca'},
{firstName: 'Gay', lastName: 'Lamoureaux'},
{firstName: 'Althea', lastName: 'Sturtz'},
{firstName: 'Kenya', lastName: 'Morocco'},
{firstName: 'Rae', lastName: 'Pasquariello'},
{firstName: 'Ted', lastName: 'Abundis'},
{firstName: 'Jessie', lastName: 'Schacherer'},
{firstName: 'Jamie', lastName: 'Gleaves'},
{firstName: 'Hillary', lastName: 'Spiva'},
{firstName: 'Elinor', lastName: 'Rockefeller'},
{firstName: 'Dona', lastName: 'Clauss'},
{firstName: 'Ashlee', lastName: 'Kennerly'},
{firstName: 'Alana', lastName: 'Wiersma'},
{firstName: 'Kelly', lastName: 'Holdman'},
{firstName: 'Mathew', lastName: 'Lofthouse'},
{firstName: 'Dona', lastName: 'Tatman'},
{firstName: 'Clayton', lastName: 'Clear'},
{firstName: 'Rosalinda', lastName: 'Urman'},
{firstName: 'Cody', lastName: 'Sayler'},
{firstName: 'Odessa', lastName: 'Averitt'},
{firstName: 'Ted', lastName: 'Poage'},
{firstName: 'Penelope', lastName: 'Gayer'},
{firstName: 'Katy', lastName: 'Bluford'},
{firstName: 'Kelly', lastName: 'Mchargue'},
{firstName: 'Kathrine', lastName: 'Gustavson'},
{firstName: 'Kelly', lastName: 'Hartson'},
{firstName: 'Carlene', lastName: 'Summitt'},
{firstName: 'Kathrine', lastName: 'Vrabel'},
{firstName: 'Roxie', lastName: 'Mcconn'},
{firstName: 'Margery', lastName: 'Pullman'},
{firstName: 'Avis', lastName: 'Bueche'},
{firstName: 'Esmeralda', lastName: 'Katzer'},
{firstName: 'Tania', lastName: 'Belmonte'},
{firstName: 'Malinda', lastName: 'Kwak'},
{firstName: 'Tanisha', lastName: 'Jobin'},
{firstName: 'Kelly', lastName: 'Dziedzic'},
{firstName: 'Darren', lastName: 'Devalle'},
{firstName: 'Julio', lastName: 'Buchannon'},
{firstName: 'Darren', lastName: 'Schreier'},
{firstName: 'Jamie', lastName: 'Pollman'},
{firstName: 'Karina', lastName: 'Pompey'},
{firstName: 'Hugh', lastName: 'Snover'},
{firstName: 'Zebra', lastName: 'Evilias'}
]
});
var detailsToolbar = new Ext.Toolbar({
dock: 'bottom',
ui: 'dark',
style: "color:#fff;text-align:center",
tpl: '<tpl for=".">{firstName} {lastName}</tpl>',
});
var contactList = {
xtype: 'list',
store: listStore,
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,
scroll: false,
fullscreen: true,
listeners:{
selectionchange: function(e, row, rowdata) {
if (row != "") {
var record = rowdata[0];
detailsToolbar.update(record.data);
}
}
},
}
Ext.setup({
onReady: function() {
var list = new Ext.Panel ({
fullscreen: true,
layout: 'fit',
scroll: 'vertical',
items: [contactList],
dockedItems: [detailsToolbar],
})
}
});

dloomer
2 Nov 2010, 9:37 AM
Any takers on this? ;)

To add to my frustration I've found it becomes an even bigger headache when I set detailsToolbar initially as hidden = true and then try to optionally show/hide it on a list item click. And it seems to cause Sencha more problems when I try to dock it on the bottom (which is what I want) than when I dock it on the top.

Basically a call to the update() method on a bottom-docked item seems to confuse the framework, at least the way I'm trying to do it. Hopefully my code sample explains everything...