FormPanel doesn't display but Panel does. Bug?

[robl]

This simple app does NOT display:



Ext.application({
name: 'Sencha',


launch: function() {
Ext.create("Ext.form.Panel", {
fullscreen: true,
items: [
{
xtype: 'panel',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'test'
},
{
xtype: 'formpanel',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}
]
}
]
});
}
});



BUT this one does. Note that the only thing that changed was "formpanel" => "panel". If the code looks familiar, it's from the "Getting Started" guide: docs/index.html#!/guide/forms



Ext.application({
name: 'Sencha',


launch: function() {
Ext.create("Ext.form.Panel", {
fullscreen: true,
items: [
{
xtype: 'panel',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'test'
},
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}
]
}
]
});
}
});

[TommyMaintz]

I see a couple things wrong with your code sample. First of all, you are nesting a form panel inside of a form panel. Second, you are not specifying any layouts anywhere. Since scrollable items don't support auto height, and form panel is scrollable by default, the form panel never gets a height. Try the following code where I removed over nesting and gave stuff layout.



launch: function() {
Ext.create("Ext.Panel", {
fullscreen: true,
layout: 'fit',
items: [{
xtype: 'formpanel',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'test'
}, {
xtype: 'textfield',
name : 'name',
label: 'Name'
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email'
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}]
}]
});
},


Even cleaner would be to just do:



launch: function() {
Ext.create("Ext.form.Panel", {
fullscreen: true,
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'test'
}, {
xtype: 'textfield',
name : 'name',
label: 'Name'
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email'
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}]
});
},

[robl]

Thanks Tommy. It was the missing 'layout' attributes. Can you put an assert/exception into the framework for Panels that don't define layouts? These kinds of issues are a real pain and will always occur despite diligence on the part of the programmer.

Additionally, it would be nice to see some debug logs in various methods in the "debug" version of the sencha touch library so that we can more easily follow what's going on. This would take ~30 mins to do and would not impact performance of a production app because production apps would not use the debug js.

[TommyMaintz]

We can't throw debug warnings for panels without a layout, since it happens quite often that you don't actually want to define a layout.

As for various debug logs, we try to do this in many places. When you say it would take ~30 mins to do, I'm pretty sure you underestimate the time required ;) Any particular debug logs you like to see?

[robl]

Indeed, it would take more than 30 minutes. It has be analyzed, coded, tested, checked in, etc... I am just saying that it's not a huge effort.

Under which situations would there be no layout? If it's so that you can programmatically specify one, perhaps when the form is rendered, there could be an assertion...