Ext.form.Panel does not show in Ext.Panel

[by_lexus]

Dear all,

I try the following code in Sencha Touch 2.1:

// A very simple container implementing a title bar with a button. On button click, a floating form panel should show up:


Ext.application({
    launch: function() {
        Ext.create('Ext.Container',{
            fullscreen: true,
            items:[{
                docked: 'top',
                xtype: 'titlebar',
                title: 'title',
                items: [{
                    xtype: 'button',
                    text: 'open floating panel form',
                    handler: function(btn) {
                        var panel = Ext.create('Ext.Panel', {
                            left: 0,
                            top: 0,
                            modal: true,

                           layout: 'fit',                            hideOnMaskTap: true,
                            items: [{
                                xtype: 'formpanel',
                                items: [{
                                    xtype: 'textfield',
                                    name: 'myfield',
                                    label: 'myfield',
                                    labelWidth: 120
                                }]
                            }]
                        });
                        panel.showBy(btn);
                    }
                }]
            }, {
                    html: 'test content'
            }]
        });
    }
});

On button click, the Ext.Panel shows up, but completely empty and very small.

If I try the same but without form panel, it works great, but does not help me as I then have no form:

Ext.application({
    launch: function() {
        Ext.create('Ext.Container',{
            fullscreen: true,
            items:[{
                docked: 'top',
                xtype: 'titlebar',
                title: 'title',
                items: [{
                    xtype: 'button',
                    text: 'open floating panel form',
                    handler: function(btn) {
                        var panel = Ext.create('Ext.Panel', {
                            left: 0,
                            top: 0,
                            modal: true,
                            hideOnMaskTap: true,
                            items: [{
                                xtype: 'textfield',
                                name: 'myfield',
                                label: 'myfield',
                                labelWidth: 120
                            }]
                        });
                        panel.showBy(btn);
                    }
                }]
            }, {
                    html: 'test content'
            }]
        });
    }
});

So for me this seems to be a bug, or am I missing something?

[mitchellsimoens]

The formpanel does not support auto sizing so since the floating Panel doesn't have any sizing it will look like it has no size. Give the panel a size and you will see the form.

[by_lexus]

Thanks, that was it. Giving the Ext.Panel a defined width / height did the trick.