Form Panel into Panel don't work

**fabio.policeno** · 12 Nov 2011 8:40 AM

Because it don't worked?
Not show the formpanel.

Code:

Ext.regApplication({
    name         : 'Example',
    
    launch: function(){
        new Ext.Panel({
            fullscreen : true,
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Standard Titlebar'
            }],
            items       : [{
                xtype: 'formpanel',
                items: [{
                    name       : 'nome',
                    label       : 'Nome'
                }]
            }]
        });
    } 
});

Thank's!

mitchellsimoens

Try using fit layout on the Panel... also, why not unnest the form and have it fullscreen?

**mitchellsimoens** · 12 Nov 2011 6:52 PM

Try using fit layout on the Panel... also, why not unnest the form and have it fullscreen?

**fabio.policeno** · 13 Nov 2011 5:45 AM

Originally Posted by mitchellsimoens

Try using fit layout on the Panel...

Not show formPanel:

Code:

Ext.regApplication({
    name         : 'Example',
    
    launch: function(){
        new Ext.Panel({
            fullscreen : true,
            layout       : 'fit',
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Standard Titlebar'
            }],
            items       : [{
                xtype: 'formpanel',
                items: [{
                    name       : 'nome',
                    label       : 'Nome'
                }]
            }]
        });
    } 
});

Originally Posted by mitchellsimoens

also, why not unnest the form and have it fullscreen?

The panel is already with fullscreen

**mitchellsimoens** · 13 Nov 2011 6:11 AM

2 things I see wrong:

Ext.regApplication is a Sencha Touch 1 thing, not valid in Sencha Touch 2
dockedItems should not be used anymore

This works in ST2 PR1:

Code:

Ext.application({
    name         : 'Example',

    launch: function(){
        new Ext.Panel({
            fullscreen : true,
            layout       : 'fit',
            items       : [
                {
                    xtype  : 'toolbar',
                    docked : 'top',
                    title  : 'Standard Titlebar'
                },
                {
                    xtype: 'formpanel',
                    items: [
                        {
                            name       : 'nome',
                            label       : 'Nome'
                        }
                    ]
                }
            ]
        });
    }
});

You can that Ext.regApplication has been replaced by Ext.application. You can also see that your toolbar is now within the items array and with a config docked : 'top' to tell it where to dock.

**fabio.policeno** · 13 Nov 2011 9:17 AM

Sorry, I'm actually aware of it, I made an example of this for each version (1, 2PR1, 2PR2), but I ended up posting the wrong code, finally, I tested your code in version 1, 2PR1, 2PR2 and simply FormPanel does not appear, only the tollbar.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
    
    <script type="text/javascript" src="contato/app.js"></script>    
</head>
<body></body>
</html>

Code:

Ext.application({
    name         : 'Example',

    launch: function(){
        new Ext.Panel({
            fullscreen : true,
            layout       : 'fit',
            items       : [
                {
                    xtype  : 'toolbar',
                    docked : 'top',
                    title  : 'Standard Titlebar'
                },
                {
                    xtype: 'formpanel',
                    items: [
                        {
                            name       : 'nome',
                            label       : 'Nome'
                        }
                    ]
                }
            ]
        });
    }
});

Thank you!

Sem título.jpg

**mitchellsimoens** · 13 Nov 2011 9:22 AM

Looks like Ext.form.Panel doesn't have defaultType anymore so you can add defaultType to the formpanel or xtype on your fields... or both.

Code:

Ext.application({
    name         : 'Example',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen : true,
            layout     : 'fit',
            items      : [
                {
                    xtype  : 'toolbar',
                    docked : 'top',
                    title  : 'Standard Titlebar'
                },
                {
                    xtype       : 'formpanel',
                    defaultType : 'textfield',
                    items       : [
                {
                    //xtype : 'textfield',
                    name  : 'name',
                    label : 'Name'
                }
            ]
        }
    ]
});

**fabio.policeno** · 13 Nov 2011 9:53 AM

Actually, I made an example to illustrate part of the problem and ended up taking the defaultType not realized, the sample went to work, now I'm back to my application and even setting the defaultType did not work, then tried putting layout: 'fit' and it worked . Finally, the initial problem was the lack of layout: 'fit', thank you and sorry for not spotting the mistake of missing the xtype, the problem is that over the long code that does not just spotting things extremely simple.

Form Panel into Panel don't work

Thread Tools

Search Thread

Display

Answered: Form Panel into Panel don't work

Answered: Form Panel into Panel don't work