Questions about Tabs, tabpanel

[sj_tt6]

Hi,

I'm a newbie and trying to use Sencha. I have a couple of questions.
1. In the tabs examples, I'm trying to resize and make the tabs, tabpanel display around 1/3 of the screen from the bottom. However what I get is just a blank page in the Chrome browser.



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
new Ext.TabPanel({
fullscreen: false,
maxWidth: 800,
maxHeight: 300,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1'
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
}
});


Would someone please help me to solve this problem?

2. How can I debug Sencha? In Chrome I use Ctrl + Shift + J to open the console, but that is it.

Thank you in advance!

[sj_tt6]

anyone?

[TommyMaintz]

Sorry for the delayed reply.

The fullscreen config option automatically renders and lays out the item after instantiation. If you dont use the fullscreen option, you will have to render and layout yourself. Thus the following will work:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
var tabpanel = new Ext.TabPanel({
fullscreen: false,
width: 800,
height: 300,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1'
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});

tabpanel.render(document.body);
tabpanel.doComponentLayout();
}
});


This however is bad very practice. You will lose any functionality related to orientation change, your app won't look good on different screensizes, and your layouts are not fluid.

An alternative would be to use a fullscreen panel, add your toolbar as a docked item on the bottom, and give it a margin in css. The layout will automatically respect the margin.

[sj_tt6]

Thank you!