PDA

View Full Version : Problem with toolbar?



explosivo22
16 Aug 2011, 6:48 PM
I seem to be having a little trouble getting my title bar to show up when I am using my tabPanel. It seems to want to go off the screen and only show up when I click the top of the browser on iOS. And Android it shows the toolbar, but it barely shows the tab bar at the bottom. Can anyone please help me with this?

here is what code I have right now:


new Ext.Application({


name: 'Test',
launch: 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: 'Test2',
displayField: 'text',
iconCls: 'team',
//dock: 'top',
store: store
});

var tabPanel = new Ext.TabPanel ({
layout: {
pack: 'center'
},
tabBarDock: 'bottom',
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
fullscreen: true,
items: [
{
title:'Test 1',
html: 'Test 1',
iconCls: 'home'
},
nestedList
]
});

var dockedItems = [
{
xtype: 'toolbar',
title: 'First Test App'
},
tabPanel

]// JavaScript Document

var appPanel = new Ext.Panel({
id: 'appPanel',
fullscreen: true,
layout: 'card',
dockedItems: dockedItems
});


}


});