View Full Version : NestedList Display Issue

5 Mar 2012, 12:02 AM
My application has tabpanel with bottom tabs. One of the tabs has content with nestedList.

Nested list does not show up without either { fullscreen: true } or { layout: 'auto' }.

Issue with Fullscreen-true:
This causes the nested list to show up on top of all the other views by default.


Issue with Layout Auto:
The list shows up, but clicking on any list item does not do anything, instead gives this error [ TypeError: 'undefined' is not a function (evaluating 'this.layout.setActiveItem(card, animation)') ] (Using this forces the list to not uses the cardSwitchAnimation, so my list is not a nestedList anymore.)

Basically, not able to show the nested list correctly. Please help.

Here is the code, pretty simple:

App.views.Topics = Ext.extend(Ext.Panel, {
id : "Topics",

initComponent : function() {

var topicsList = new Ext.NestedList({
id : "TopicsList",
title: "Topics",
store: topicsStore, // store is setup with autoload: true
layout: 'auto', // or fullscreen: true,

dockedItems :
xtype : 'Advertise',
items : [

Ext.reg("Topics", App.views.Topics);

5 Mar 2012, 7:00 AM
You shouldn't put layout : 'auto' on the nestedlist. YOu need to keep it to it's default of card. It's parent needs to use layout : 'fit' to manage it's size.

5 Mar 2012, 10:18 AM
It's parent needs to use layout : 'fit' to manage it's size.

That did the trick. Thank you.