1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    12
    Vote Rating
    0
    Answers
    1
    dw12345 is an unknown quantity at this point

      0  

    Default Answered: Ext.form.Panel only works in fit layout

    Answered: Ext.form.Panel only works in fit layout


    It looks as though a form panel will only work correctly in a fit layout. Is this correct? I have wasted many hours trying to use a vbox layout.

    This displays the form fields correctly
    Code:
    Ext.application({    
        name: 'app',
        launch: function(){
            var vp = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: 'fit'
            });
    //         var hdr = Ext.create('Ext.TitleBar', {
    //            title: 'test title'
    //        });
             var fp = Ext.create('Ext.form.Panel', {
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'test panel header'
                },{
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                },{
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                }]
            });
    //        vp.add(hdr);
            vp.add(fp);
        }
    });
    This displays the form fields correctly
    Code:
    Ext.application({    
        name: 'app',
        launch: function(){
            var vp = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: 'vbox'
            });
     //         var hdr = Ext.create('Ext.TitleBar', {
    //            title: 'test title'
    //        });
               var fp = Ext.create('Ext.form.Panel', {
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'test panel header'
                },{
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                },{
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                }]
            });
       //        vp.add(hdr);
            vp.add(fp);
        }
    });

  2. It works, you just need to tell the form to have a height (notice red text):

    Code:
    Ext.application({    
        name: 'app',
        launch: function(){
            var vp = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type : 'vbox',
                    align : 'stretch'
                }
            });
     //         var hdr = Ext.create('Ext.TitleBar', {
    //            title: 'test title'
    //        });
               var fp = Ext.create('Ext.form.Panel', {
                flex : 1,
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'test panel header'
                },{
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                },{
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                }]
            });
       //        vp.add(hdr);
            vp.add(fp);
        }
    });
    align : 'stretch' will make the items fill the entire width. flex : 1 is the ratio of the parent's height, in this case since it is the only item it will fill the entire height.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It works, you just need to tell the form to have a height (notice red text):

    Code:
    Ext.application({    
        name: 'app',
        launch: function(){
            var vp = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type : 'vbox',
                    align : 'stretch'
                }
            });
     //         var hdr = Ext.create('Ext.TitleBar', {
    //            title: 'test title'
    //        });
               var fp = Ext.create('Ext.form.Panel', {
                flex : 1,
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'test panel header'
                },{
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                },{
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                }]
            });
       //        vp.add(hdr);
            vp.add(fp);
        }
    });
    align : 'stretch' will make the items fill the entire width. flex : 1 is the ratio of the parent's height, in this case since it is the only item it will fill the entire height.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    12
    Vote Rating
    0
    Answers
    1
    dw12345 is an unknown quantity at this point

      0  

    Default


    Thanks for your help

    It would be good if flex: 1 were the default when using vbox/hbox layouts. Then sizing would only be needed if different sized components were required.

Thread Participants: 1