PDA

View Full Version : NestedList Inside of TabPanel?



jkoutavas
22 Dec 2010, 3:43 PM
Okay, I'm trying to do something fairly basic here, I'm trying to put a NestedList inside of a TabPanel. When I execute the following code, I'm getting a HUGELY rendered nested list. Which can be seen here:

http://www.heynow.com/SenchaTouchExample/NestedListInTabPanel.png
I'm using Sencha Touch 1.0.1. What am I missing? I've tried all sorts of layout types, setting height/width, etc. Help!




Ext.ns('NestedListsInTabPanel');

NestedListsInTabPanel.Main = {
init : function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: 'card',
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'placeholder',
iconCls: 'info',
}]
});
tabpanel.removeAll(); // @@ hack: just get the tab bar the right height

var content = [{title: 'Tab 1'}, {title: 'Tab 2'}];

for( var i=0; i<content.length; i++ ) {
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({
title: content[i].title,
displayField: 'text',
store: store
});

tabpanel.add(nestedList);
}

tabpanel.doLayout();
}
};

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
NestedListsInTabPanel.Main.init();
}
});

evant
22 Dec 2010, 3:45 PM
Your code runs fine for me in Touch 1.0.1. Make sure all the css is included properly.

jkoutavas
22 Dec 2010, 3:54 PM
Oh, geez. I had some left over CSS from some prior experiments. *face palm* Thanks. I'm just starting out. Working fine now.