View Full Version : ItemDisclosure for Grouped List

26 Apr 2011, 1:03 PM
Hey all,

I'm trying to make an ItemDisclosure for a Grouped List and I cannot get the new panel to open. I believe the issue is with what I am calling my main panel with the setActiveItem call. I used the ToolbarDemo from the Sencha Touch video demonstations on Vimeo to make the framework. I think the issues is here:


When I click the list it says that ToolbarDemo.viewport is undefined. I have tried all sorts of things: ToolbarDemo.views.Peoplecard, ToolbarDemo.views.Peoplecard.viewport, etc. and I only recently changed it to 'this.detailpanel' (I had just 'detailpanel' before). Any help would be most appreciated. I would be happy to elaborate more. Also to note, I've changed this file to a php content-type: text/javascript so that I can pull my data from a database. Maybe not the best way to do that. That could be messing things up? If anyone has any recommendations on how to better pull 100 people, names, projects and descriptions that are already stored in a WordPress database now- that'd be great too.

Thanks in advance.

Here's a look at my full code (data query removed):

<?php header('Content-type: text/javascript'); ?>

Ext.regModel('Contact', {
fields: ['lastName']

ToolbarDemo.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0];
data: [


ToolbarDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Hello!',
dockedItems: [
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
ToolbarDemo.viewport..setActiveItem('disclosurelist', {type:'slide', direction:'right'});

ToolbarDemo.listPanel = new Ext.List({
id: 'disclosurelist',
store: ToolbarDemo.ListStore,
itemTpl: '<div class="contact">{displayName}</div>',
grouped: true,
indexBar: true,
onItemDisclosure: function(record, btn, index) {

ToolbarDemo.views.Peoplecard = Ext.extend(Ext.Panel, {
title: "People",
iconCls: "user",
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "People"
items: [ToolbarDemo.listPanel, ToolbarDemo.detailPanel]
ToolbarDemo.views.Peoplecard.superclass.initComponent.apply(this, arguments);

Ext.reg('peoplecard', ToolbarDemo.views.Peoplecard);

28 Apr 2011, 9:13 AM
Any word? I've really tried everything. I even got rid of the php so it is now just a .js file with a legite data query. I think I am having issues with the ext.Extend aspect of things?

Any help would be greatly appreciated! It's for a Final Project due next week at Parsons.