FormPanel in Tabpanel very big

[bamato]

Hello everybody,

We use Sencha Touch for a schoolproject and we made the core layout, though we have one problem.

We made a TabPanel and one tab refers to 'form1', which is a FormPanel (named 'form1'). When we click on the tap which refers to the formpanel, the formpanel is displayed too big. We tried everything, like adding listeners and doLayout();

Please look at the code and if you can find the problem, we would be eternally gratefull!

A live demo is hosted on http://www.sitescripting.nl/pfws/. Please watch this demo on your iPhone, since we are testing on that platform.

Thanks in advance for all help!


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {


Ext.regModel('Les', {
fields: ['id', 'naam', 'docent', 'lokaal', 'dag', 'uur'],

proxy: {
type: 'localstorage',
id : 'Lessen'
}
});
var form1 = new Ext.form.FormPanel({
scroll: 'vertical',
standardSubmit : false,
items: [
{
xtype: 'textfield',
name : 'les1',
label: 'Les 1',
useClearIcon: true,
autoCapitalize : true
}, {
xtype: 'textfield',
name : 'docent1',
label: 'Docent',
useClearIcon: true,
autoCapitalize: true
}, {
xtype: 'textfield',
name : 'lokaal1',
label: 'Lokaal',
useClearIcon: true
}]


});


var paneel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
activeTab: 0,
fullscreen: true,
layoutOnTabChange: true,
ui: 'light',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Overzicht',
html: '<h1>iClassroom</h1><p>Welkom op de testpagina van iClassroom.</p>',
iconCls: 'home',
cls: 'card1'
}, {
xtype: 'container',
title: 'Lessen',
iconCls: 'rooster-icon',
icon: '../themes/images/default/pictos/calendar2.png',
items: form1,
layout: 'vbox',
cls: 'card2',
badgeText: '7',
anchor: '20%'
}, {
title: 'Huiswerk',
html: '<h1>Huiswerk</h1>',
cls: 'card3',
iconCls: 'bookmarks'
}, {
title: 'Projecten',
html: '<h1>Projecten</h1>',
cls: 'card4',
iconCls: 'team',
badgeText: '3'
}, {
title: 'Instellingen',
cls: 'card5',
iconCls: 'settings'
}],
});
}
});

[sonoro]

OK
delete property "fullscreen: true" on TabPanel object.

bye

[bamato]

Somebody got an idea? We are really in need of a solution :)

[steve1964]

Just set the width, height config of the form:


var form1 = new Ext.form.FormPanel({
scroll: 'vertical',
width: 300,
height: 200,
standardSubmit : false,
items: [
{
xtype: 'textfield',
name : 'les1',
label: 'Les 1',
useClearIcon: true,
autoCapitalize : true
}, {
xtype: 'textfield',
name : 'docent1',
label: 'Docent',
useClearIcon: true,
autoCapitalize: true
}, {
xtype: 'textfield',
name : 'lokaal1',
label: 'Lokaal',
useClearIcon: true
}]


});

[steve1964]

I've take a look to the source code, the problem is in your css, you have overridden .x-tabpanel > .x-panel-body .x-panel-body and this is applied to the form too, is because of the 72px form field...

[bamato]

That's strange, since I didn't edit the CSS. What do I have to edit precisely?
Thanks for your answer by the way!

Edit:
Ah I see now! Will edit that code, I'll let you know when it works! Thank you!

Edit2:
You are great! It worked, now it displays properly! Thank you very much!