Results 1 to 3 of 3

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

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    12
    Answers
    1
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @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
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    12
    Answers
    1
    Vote Rating
    0
      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.

Posting Permissions

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