View Full Version : List detail .seActiveItem undefined

16 Jul 2011, 6:43 PM
Hi there,

Am putting together and app and attempting to get a list with a detail panel working. I have based it on the Sencha list video, but keep getting an error "TypeError: Result of expression 'abc.artistList.setActiveItem' [undefined] is not a function." when I try to click on an item and reveal the detail panel. The full code is below:

Ext.ns('abc', 'abc.panel', 'abc.store');

// Models _____________________________________________________________________
Ext.regModel('Artists', {
fields: ['firstName', 'lastName']

// Stores _____________________________________________________________________
abc.store.Artists = new Ext.data.Store({
model: 'Artists',
proxy: {
type: 'ajax',
url: 'http://localhost:8888/abc/stores/artists.json',
reader: {
type: 'json',
root: 'artists'
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0];
autoLoad: true

abc.artistDetail = new Ext.Panel({
id: 'detailpanel',
tpl: 'Hello, {firstName}!',
dockedItems: [
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
abc.panel.Artists.setActiveItem('artistList', {type:'slide', direction:'right'});

abc.artistList = new Ext.List({
title: 'Artists',
store: abc.store.Artists,
fullscreen: true,
id: 'artistList',
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {

abc.panel.Artists = Ext.extend(Ext.Panel, {
id: 'artists',
title: 'Artists',
layout: 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',
iconCls: 'artists',
items: [abc.artistList, abc.artistDetail],

abcPrimavera = new Ext.Application({
name: "abcApp",

onReady: function () {
var app = new Ext.TabPanel({
fullscreen: true,
animation: false,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
items: [
new abc.panel.Artists()]

Any help would be brilliant.


17 Jul 2011, 7:46 PM
Call setActiveItem on the instance

onItemDisclosure: ...

17 Jul 2011, 7:53 PM
Thanks so much! It works, but the back button is causing the same error - any idea how I can edit the handler function?

17 Jul 2011, 7:58 PM
Call setActiveItem on instance.

Ext.getCmp('artists').setActiveItem('artistList', {type:'slide', direction:'right'});