Results 1 to 7 of 7

Thread: Form Panel into Panel don't work

  1. #1
    Sencha Premium User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Posts
    357
    Answers
    18
    Vote Rating
    5
      0  

    Default Answered: Form Panel into Panel don't work

    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!

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

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    Try using fit layout on the Panel... also, why not unnest the form and have it fullscreen?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha Premium User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Posts
    357
    Answers
    18
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    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'
                    }]
                }]
            });
        } 
    });
    Quote Originally Posted by mitchellsimoens View Post
    also, why not unnest the form and have it fullscreen?
    The panel is already with fullscreen

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    2 things I see wrong:

    1. Ext.regApplication is a Sencha Touch 1 thing, not valid in Sencha Touch 2
    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.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha Premium User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Posts
    357
    Answers
    18
    Vote Rating
    5
      0  

    Default

    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

  7. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    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'
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #7
    Sencha Premium User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Posts
    357
    Answers
    18
    Vote Rating
    5
      0  

    Default



    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.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •