Nested List inside of Tab Panel?

[m0ngr31]

Hey guys, I've started a project with sencha touch (my first real experience with JS), and I'm afraid I've bitten off more than I can chew..

I've created most of my webapp but I'm having a problem trying to put a Nested list inside of a tab panel. I get this error:
Uncaught TypeError: Cannot call method 'getRootNode' of undefined.

And here's how I'm trying to insert it:
{
title: 'Settings',
iconCls: 'settings',
layout: 'card',
items: [nestedPanel]
}

Can someone point me in the right direction?

[gaara87]

I 'm facing the same problem too...do tell me if you figured out the solution!

[koolaid1551]

Here is a simle way of doing it, I just created a panel with a tabpanel and docked a nestedlist in one of the cards

Ext.setup({
onReady: function () {
// store with data 
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
}, {
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
}, {
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
}, {
text: 'Lemon',
leaf: true
}]
}, {
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
}, {
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}, {
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{
name: 'text',
type: 'string'
}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: store
});
var appPanel = new Ext.Panel({
id: 'appPanel',
fullscreen: true,
dockedItems: {
xtype: 'tabpanel',
layout: {
pack: "center"
},
fullscreen: true,
items: [{
title: 'test1',
html: '<p>test 1</p>'
}, {
title: 'NestedList',
dockedItems: nestedList
}, {
title: 'test3',
html: '<p>test 3</p>'
}]
}
});
} // end onReady 
});