You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    547
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default [FIXED]Found another hbox in vbox form layout problem

    [FIXED]Found another hbox in vbox form layout problem


    This is a different problem, but possibly related to:

    http://www.sencha.com/forum/showthre...ith-hbox-items

    I have a form with a vbox layout where each item has a hbox layout. The left item has a radiogroup and right item a combo. The problem is the radio labels render down instead of across.

    Fullscreen capture 332011 120203 PM.jpg

    Copy this to hbox-form.js and run the example to reproduce the problem. Change the combo to a textfield and the problem isn't there, although it might add too much whitespace below the fields.

    PHP Code:
    Ext.require([ 
        
    'Ext.form.FormPanel'
        
    'Ext.layout.container.Anchor' 
    ]); 

    Ext.regModel('State', {
        
    fields: [{
            
    type'string',
            
    name'abbr'
        
    }, {
            
    type'string',
            
    name'name'
        
    }, {
            
    type'string',
            
    name'slogan'
        
    }]
    });

    // The data store holding the states; shared by each of the ComboBox examples below
    Ext.regStore('State', {
        
    model'State',
        
    data: [{
            
    "abbr""AL",
            
    "name""Alabama",
            
    "slogan""The Heart of Dixie"
        
    }, {
            
    "abbr""AK",
            
    "name""Alaska",
            
    "slogan""The Land of the Midnight Sun"
        
    }, {
            
    "abbr""AZ",
            
    "name""Arizona",
            
    "slogan""The Grand Canyon State"
        
    }, {
            
    "abbr""AR",
            
    "name""Arkansas",
            
    "slogan""The Natural State"
        
    }, {
            
    "abbr""CA",
            
    "name""California",
            
    "slogan""The Golden State"
        
    }, {
            
    "abbr""CO",
            
    "name""Colorado",
            
    "slogan""The Mountain State"
        
    }, {
            
    "abbr""CT",
            
    "name""Connecticut",
            
    "slogan""The Constitution State"
        
    }, {
            
    "abbr""DE",
            
    "name""Delaware",
            
    "slogan""The First State"
        
    }, {
            
    "abbr""DC",
            
    "name""District of Columbia",
            
    "slogan""The Nation's Capital"
        
    }, {
            
    "abbr""FL",
            
    "name""Florida",
            
    "slogan""The Sunshine State"
        
    }, {
            
    "abbr""GA",
            
    "name""Georgia",
            
    "slogan""The Peach State"
        
    }, {
            
    "abbr""HI",
            
    "name""Hawaii",
            
    "slogan""The Aloha State"
        
    }, {
            
    "abbr""ID",
            
    "name""Idaho",
            
    "slogan""Famous Potatoes"
        
    }, {
            
    "abbr""IL",
            
    "name""Illinois",
            
    "slogan""The Prairie State"
        
    }, {
            
    "abbr""IN",
            
    "name""Indiana",
            
    "slogan""The Hospitality State"
        
    }, {
            
    "abbr""IA",
            
    "name""Iowa",
            
    "slogan""The Corn State"
        
    }, {
            
    "abbr""KS",
            
    "name""Kansas",
            
    "slogan""The Sunflower State"
        
    }, {
            
    "abbr""KY",
            
    "name""Kentucky",
            
    "slogan""The Bluegrass State"
        
    }, {
            
    "abbr""LA",
            
    "name""Louisiana",
            
    "slogan""The Bayou State"
        
    }, {
            
    "abbr""ME",
            
    "name""Maine",
            
    "slogan""The Pine Tree State"
        
    }, {
            
    "abbr""MD",
            
    "name""Maryland",
            
    "slogan""Chesapeake State"
        
    }, {
            
    "abbr""MA",
            
    "name""Massachusetts",
            
    "slogan""The Spirit of America"
        
    }, {
            
    "abbr""MI",
            
    "name""Michigan",
            
    "slogan""Great Lakes State"
        
    }, {
            
    "abbr""MN",
            
    "name""Minnesota",
            
    "slogan""North Star State"
        
    }, {
            
    "abbr""MS",
            
    "name""Mississippi",
            
    "slogan""Magnolia State"
        
    }, {
            
    "abbr""MO",
            
    "name""Missouri",
            
    "slogan""Show Me State"
        
    }, {
            
    "abbr""MT",
            
    "name""Montana",
            
    "slogan""Big Sky Country"
        
    }, {
            
    "abbr""NE",
            
    "name""Nebraska",
            
    "slogan""Beef State"
        
    }, {
            
    "abbr""NV",
            
    "name""Nevada",
            
    "slogan""Silver State"
        
    }, {
            
    "abbr""NH",
            
    "name""New Hampshire",
            
    "slogan""Granite State"
        
    }, {
            
    "abbr""NJ",
            
    "name""New Jersey",
            
    "slogan""Garden State"
        
    }, {
            
    "abbr""NM",
            
    "name""New Mexico",
            
    "slogan""Land of Enchantment"
        
    }, {
            
    "abbr""NY",
            
    "name""New York",
            
    "slogan""Empire State"
        
    }, {
            
    "abbr""NC",
            
    "name""North Carolina",
            
    "slogan""First in Freedom"
        
    }, {
            
    "abbr""ND",
            
    "name""North Dakota",
            
    "slogan""Peace Garden State"
        
    }, {
            
    "abbr""OH",
            
    "name""Ohio",
            
    "slogan""The Heart of it All"
        
    }, {
            
    "abbr""OK",
            
    "name""Oklahoma",
            
    "slogan""Oklahoma is OK"
        
    }, {
            
    "abbr""OR",
            
    "name""Oregon",
            
    "slogan""Pacific Wonderland"
        
    }, {
            
    "abbr""PA",
            
    "name""Pennsylvania",
            
    "slogan""Keystone State"
        
    }, {
            
    "abbr""RI",
            
    "name""Rhode Island",
            
    "slogan""Ocean State"
        
    }, {
            
    "abbr""SC",
            
    "name""South Carolina",
            
    "slogan""Nothing Could be Finer"
        
    }, {
            
    "abbr""SD",
            
    "name""South Dakota",
            
    "slogan""Great Faces, Great Places"
        
    }, {
            
    "abbr""TN",
            
    "name""Tennessee",
            
    "slogan""Volunteer State"
        
    }, {
            
    "abbr""TX",
            
    "name""Texas",
            
    "slogan""Lone Star State"
        
    }, {
            
    "abbr""UT",
            
    "name""Utah",
            
    "slogan""Salt Lake State"
        
    }, {
            
    "abbr""VT",
            
    "name""Vermont",
            
    "slogan""Green Mountain State"
        
    }, {
            
    "abbr""VA",
            
    "name""Virginia",
            
    "slogan""Mother of States"
        
    }, {
            
    "abbr""WA",
            
    "name""Washington",
            
    "slogan""Green Tree State"
        
    }, {
            
    "abbr""WV",
            
    "name""West Virginia",
            
    "slogan""Mountain State"
        
    }, {
            
    "abbr""WI",
            
    "name""Wisconsin",
            
    "slogan""America's Dairyland"
        
    }, {
            
    "abbr""WY",
            
    "name""Wyoming",
            
    "slogan""Like No Place on Earth"
        
    }]
    });

    Ext.onReady(function() { 
        
    Ext.create('Ext.form.FormPanel', { 
            
    renderToExt.getBody(), 
            
    title'Form Panel'
            
    bodyStyle'padding:5px 5px 0'
            
    width600
            
    height600
            
    fieldDefaults: { 
                
    labelAlign'top'
                
    msgTarget'side' 
            
    }, 
            
    layout: { 
                
    type'vbox'
                
    align'stretch'     
            
    }, 
            
    defaults: { 
                
    xtype'container'
                
    layout: { 
                    
    type'hbox'
                    
    align'top'     
                

            }, 
            
    items: [{
                
    items: [{
                    
    xtype'radiogroup',
                    
    flex1,
                    
    fieldLabel'[Payment Method]',
                    
    items: [{
                        
    boxLabel'[Credit Card]',
                        
    name'paymentMethod',
                        
    inputValue'CC',
                        
    checkedtrue,
                        
    margins: {
                            
    right5
                        
    }
                    }, {
                        
    boxLabel'[Saved Account]',
                        
    name'paymentMethod',
                        
    inputValue'SA'
                    
    }]
                }, {
                    
    xtype'combo',
                    
    flex1,
                    
    fieldLabel'Account',
                    
    name'state',
                    
    store'State',
                    
    queryMode'local',
                    
    displayField'name',
                    
    margins: {
                        
    right5
                    
    }
                }]

            }, { 
                
    items: [{ 
                    
    xtype'textfield'
                    
    flex1
                    
    fieldLabel'[First Name]'
                    
    name'firstName' 
                
    }, { 
                    
    xtype'textfield'
                    
    flex1
                    
    fieldLabel'[Last Name]'
                    
    name'lastName' 
                
    }] 
            }], 
            
    buttons: ['->', { 
                
    text'Save' 
            
    }, { 
                
    text'Cancel' 
            
    }] 
        }); 
    }); 

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Seems like the same issue. But more test cases are a good thing.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    547
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default


    Quote Originally Posted by Jamie Avins View Post
    Seems like the same issue. But more test cases are a good thing.
    Ask and you shall receive! Here's an example where I have a fieldcontainer on the 2nd row which adds extra whitespace before the 3rd row. Also, see my comment in the code to show how to reproduce some additional weirdness.

    PHP Code:
    Ext.require([ 
        
    'Ext.form.FormPanel'
        
    'Ext.layout.container.Anchor' 
    ]); 

    Ext.regModel('State', {
        
    fields: [{
            
    type'string',
            
    name'abbr'
        
    }, {
            
    type'string',
            
    name'name'
        
    }, {
            
    type'string',
            
    name'slogan'
        
    }]
    });

    // The data store holding the states; shared by each of the ComboBox examples below
    Ext.regStore('State', {
        
    model'State',
        
    data: [{
            
    "abbr""AL",
            
    "name""Alabama",
            
    "slogan""The Heart of Dixie"
        
    }, {
            
    "abbr""AK",
            
    "name""Alaska",
            
    "slogan""The Land of the Midnight Sun"
        
    }, {
            
    "abbr""AZ",
            
    "name""Arizona",
            
    "slogan""The Grand Canyon State"
        
    }, {
            
    "abbr""AR",
            
    "name""Arkansas",
            
    "slogan""The Natural State"
        
    }, {
            
    "abbr""CA",
            
    "name""California",
            
    "slogan""The Golden State"
        
    }, {
            
    "abbr""CO",
            
    "name""Colorado",
            
    "slogan""The Mountain State"
        
    }, {
            
    "abbr""CT",
            
    "name""Connecticut",
            
    "slogan""The Constitution State"
        
    }, {
            
    "abbr""DE",
            
    "name""Delaware",
            
    "slogan""The First State"
        
    }, {
            
    "abbr""DC",
            
    "name""District of Columbia",
            
    "slogan""The Nation's Capital"
        
    }, {
            
    "abbr""FL",
            
    "name""Florida",
            
    "slogan""The Sunshine State"
        
    }, {
            
    "abbr""GA",
            
    "name""Georgia",
            
    "slogan""The Peach State"
        
    }, {
            
    "abbr""HI",
            
    "name""Hawaii",
            
    "slogan""The Aloha State"
        
    }, {
            
    "abbr""ID",
            
    "name""Idaho",
            
    "slogan""Famous Potatoes"
        
    }, {
            
    "abbr""IL",
            
    "name""Illinois",
            
    "slogan""The Prairie State"
        
    }, {
            
    "abbr""IN",
            
    "name""Indiana",
            
    "slogan""The Hospitality State"
        
    }, {
            
    "abbr""IA",
            
    "name""Iowa",
            
    "slogan""The Corn State"
        
    }, {
            
    "abbr""KS",
            
    "name""Kansas",
            
    "slogan""The Sunflower State"
        
    }, {
            
    "abbr""KY",
            
    "name""Kentucky",
            
    "slogan""The Bluegrass State"
        
    }, {
            
    "abbr""LA",
            
    "name""Louisiana",
            
    "slogan""The Bayou State"
        
    }, {
            
    "abbr""ME",
            
    "name""Maine",
            
    "slogan""The Pine Tree State"
        
    }, {
            
    "abbr""MD",
            
    "name""Maryland",
            
    "slogan""Chesapeake State"
        
    }, {
            
    "abbr""MA",
            
    "name""Massachusetts",
            
    "slogan""The Spirit of America"
        
    }, {
            
    "abbr""MI",
            
    "name""Michigan",
            
    "slogan""Great Lakes State"
        
    }, {
            
    "abbr""MN",
            
    "name""Minnesota",
            
    "slogan""North Star State"
        
    }, {
            
    "abbr""MS",
            
    "name""Mississippi",
            
    "slogan""Magnolia State"
        
    }, {
            
    "abbr""MO",
            
    "name""Missouri",
            
    "slogan""Show Me State"
        
    }, {
            
    "abbr""MT",
            
    "name""Montana",
            
    "slogan""Big Sky Country"
        
    }, {
            
    "abbr""NE",
            
    "name""Nebraska",
            
    "slogan""Beef State"
        
    }, {
            
    "abbr""NV",
            
    "name""Nevada",
            
    "slogan""Silver State"
        
    }, {
            
    "abbr""NH",
            
    "name""New Hampshire",
            
    "slogan""Granite State"
        
    }, {
            
    "abbr""NJ",
            
    "name""New Jersey",
            
    "slogan""Garden State"
        
    }, {
            
    "abbr""NM",
            
    "name""New Mexico",
            
    "slogan""Land of Enchantment"
        
    }, {
            
    "abbr""NY",
            
    "name""New York",
            
    "slogan""Empire State"
        
    }, {
            
    "abbr""NC",
            
    "name""North Carolina",
            
    "slogan""First in Freedom"
        
    }, {
            
    "abbr""ND",
            
    "name""North Dakota",
            
    "slogan""Peace Garden State"
        
    }, {
            
    "abbr""OH",
            
    "name""Ohio",
            
    "slogan""The Heart of it All"
        
    }, {
            
    "abbr""OK",
            
    "name""Oklahoma",
            
    "slogan""Oklahoma is OK"
        
    }, {
            
    "abbr""OR",
            
    "name""Oregon",
            
    "slogan""Pacific Wonderland"
        
    }, {
            
    "abbr""PA",
            
    "name""Pennsylvania",
            
    "slogan""Keystone State"
        
    }, {
            
    "abbr""RI",
            
    "name""Rhode Island",
            
    "slogan""Ocean State"
        
    }, {
            
    "abbr""SC",
            
    "name""South Carolina",
            
    "slogan""Nothing Could be Finer"
        
    }, {
            
    "abbr""SD",
            
    "name""South Dakota",
            
    "slogan""Great Faces, Great Places"
        
    }, {
            
    "abbr""TN",
            
    "name""Tennessee",
            
    "slogan""Volunteer State"
        
    }, {
            
    "abbr""TX",
            
    "name""Texas",
            
    "slogan""Lone Star State"
        
    }, {
            
    "abbr""UT",
            
    "name""Utah",
            
    "slogan""Salt Lake State"
        
    }, {
            
    "abbr""VT",
            
    "name""Vermont",
            
    "slogan""Green Mountain State"
        
    }, {
            
    "abbr""VA",
            
    "name""Virginia",
            
    "slogan""Mother of States"
        
    }, {
            
    "abbr""WA",
            
    "name""Washington",
            
    "slogan""Green Tree State"
        
    }, {
            
    "abbr""WV",
            
    "name""West Virginia",
            
    "slogan""Mountain State"
        
    }, {
            
    "abbr""WI",
            
    "name""Wisconsin",
            
    "slogan""America's Dairyland"
        
    }, {
            
    "abbr""WY",
            
    "name""Wyoming",
            
    "slogan""Like No Place on Earth"
        
    }]
    });

    Ext.onReady(function() { 
        
    Ext.create('Ext.form.FormPanel', { 
            
    renderToExt.getBody(), 
            
    title'Form Panel'
            
    bodyStyle'padding:5px 5px 0'
            
    width800
            
    height600
            
    fieldDefaults: { 
                
    labelAlign'top'
                
    msgTarget'side' 
            
    }, 
            
    layout: { 
                
    type'vbox'
                
    align'stretch'     
            
    }, 
            
    defaults: { 
                
    xtype'container'
                
    layout: { 
                    
    type'hbox'
                    
    align'top'     
                

            }, 
            
    items: [{
                    
    items: [{
                        
    xtype'combo',
                        
    flex1,
                        
    fieldLabel'Credit Card Type',
                        
    name'state',
                        
    store'State',
                        
    queryMode'local',
                        
    displayField'name'
                    
    }, {
                        
    xtype'textfield',
                        
    flex1,
                        
    fieldLabel'[Credit Card Number]',
                        
    name'lastName'
                    
    }]
                }, {
                    
    items: [{
                        
    xtype'textfield',
                        
    flex1,
                        
    fieldLabel'[Verification Number]',
                        
    name'address'
                    
    }, {
                        
    xtype'fieldcontainer',
                        
    flex1,
                        
    fieldLabel'[Expiration Date]',
                        
    layout: {
                            
    type'hbox'
                        
    },
                        
    // Comment out the next 3 lines to see additional issues
                        
    defaults: {
                            
    hideLabeltrue
                        
    },
                        
    items: [{
                            
    xtype'combo',
                            
    flex1,
                            
    name'state',
                            
    store'State',
                            
    queryMode'local',
                            
    displayField'name',
                            
    margins: {
                                
    right5
                            
    }
                        }, {
                            
    xtype'combo',
                            
    flex1,
                            
    name'state',
                            
    store'State',
                            
    queryMode'local',
                            
    displayField'name'
                        
    }]
                    }]
                }, {
                    
    items: [{
                        
    xtype'textfield',
                        
    flex1,
                        
    fieldLabel'[City]',
                        
    name'city'
                    
    }, {
                        
    xtype'container',
                        
    flex1,
                        
    layout: {
                            
    type'hbox'
                        
    },
                        
    items: [{
                            
    xtype'combo',
                            
    flex1,
                            
    fieldLabel'[State]',
                            
    name'state',
                            
    store'State',
                            
    queryMode'local',
                            
    displayField'name',
                            
    margins: {
                                
    right5
                            
    }
                        }, {
                            
    xtype'textfield',
                            
    flex1,
                            
    fieldLabel'[Zip]',
                            
    name'zip'
                        
    }]
                    }]
            }], 
            
    buttons: ['->', { 
                
    text'Save' 
            
    }, { 
                
    text'Cancel' 
            
    }] 
        }); 
    }); 

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    547
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default Complete example showing all problems

    Complete example showing all problems


    Here is a good example showing the radio button and spacing problems. Because of the wacky layout I went with vbox's, each with a child hbox. Some hbox's also had a child hbox. Maybe I didn't implement this best way but I didn't see a better alternative. Hope my examples help.

    Fullscreen capture 332011 34926 PM.jpg

    PHP Code:
    Ext.require([ 
        
    'Ext.form.FormPanel'
        
    'Ext.layout.container.Anchor' 
    ]); 

    Ext.regModel('State', {
        
    fields: [{
            
    type'string',
            
    name'abbr'
        
    }, {
            
    type'string',
            
    name'name'
        
    }, {
            
    type'string',
            
    name'slogan'
        
    }]
    });

    // The data store holding the states; shared by each of the ComboBox examples below
    Ext.regStore('State', {
        
    model'State',
        
    data: [{
            
    "abbr""AL",
            
    "name""Alabama",
            
    "slogan""The Heart of Dixie"
        
    }, {
            
    "abbr""AK",
            
    "name""Alaska",
            
    "slogan""The Land of the Midnight Sun"
        
    }, {
            
    "abbr""AZ",
            
    "name""Arizona",
            
    "slogan""The Grand Canyon State"
        
    }, {
            
    "abbr""AR",
            
    "name""Arkansas",
            
    "slogan""The Natural State"
        
    }, {
            
    "abbr""CA",
            
    "name""California",
            
    "slogan""The Golden State"
        
    }, {
            
    "abbr""CO",
            
    "name""Colorado",
            
    "slogan""The Mountain State"
        
    }, {
            
    "abbr""CT",
            
    "name""Connecticut",
            
    "slogan""The Constitution State"
        
    }, {
            
    "abbr""DE",
            
    "name""Delaware",
            
    "slogan""The First State"
        
    }, {
            
    "abbr""DC",
            
    "name""District of Columbia",
            
    "slogan""The Nation's Capital"
        
    }, {
            
    "abbr""FL",
            
    "name""Florida",
            
    "slogan""The Sunshine State"
        
    }, {
            
    "abbr""GA",
            
    "name""Georgia",
            
    "slogan""The Peach State"
        
    }, {
            
    "abbr""HI",
            
    "name""Hawaii",
            
    "slogan""The Aloha State"
        
    }, {
            
    "abbr""ID",
            
    "name""Idaho",
            
    "slogan""Famous Potatoes"
        
    }, {
            
    "abbr""IL",
            
    "name""Illinois",
            
    "slogan""The Prairie State"
        
    }, {
            
    "abbr""IN",
            
    "name""Indiana",
            
    "slogan""The Hospitality State"
        
    }, {
            
    "abbr""IA",
            
    "name""Iowa",
            
    "slogan""The Corn State"
        
    }, {
            
    "abbr""KS",
            
    "name""Kansas",
            
    "slogan""The Sunflower State"
        
    }, {
            
    "abbr""KY",
            
    "name""Kentucky",
            
    "slogan""The Bluegrass State"
        
    }, {
            
    "abbr""LA",
            
    "name""Louisiana",
            
    "slogan""The Bayou State"
        
    }, {
            
    "abbr""ME",
            
    "name""Maine",
            
    "slogan""The Pine Tree State"
        
    }, {
            
    "abbr""MD",
            
    "name""Maryland",
            
    "slogan""Chesapeake State"
        
    }, {
            
    "abbr""MA",
            
    "name""Massachusetts",
            
    "slogan""The Spirit of America"
        
    }, {
            
    "abbr""MI",
            
    "name""Michigan",
            
    "slogan""Great Lakes State"
        
    }, {
            
    "abbr""MN",
            
    "name""Minnesota",
            
    "slogan""North Star State"
        
    }, {
            
    "abbr""MS",
            
    "name""Mississippi",
            
    "slogan""Magnolia State"
        
    }, {
            
    "abbr""MO",
            
    "name""Missouri",
            
    "slogan""Show Me State"
        
    }, {
            
    "abbr""MT",
            
    "name""Montana",
            
    "slogan""Big Sky Country"
        
    }, {
            
    "abbr""NE",
            
    "name""Nebraska",
            
    "slogan""Beef State"
        
    }, {
            
    "abbr""NV",
            
    "name""Nevada",
            
    "slogan""Silver State"
        
    }, {
            
    "abbr""NH",
            
    "name""New Hampshire",
            
    "slogan""Granite State"
        
    }, {
            
    "abbr""NJ",
            
    "name""New Jersey",
            
    "slogan""Garden State"
        
    }, {
            
    "abbr""NM",
            
    "name""New Mexico",
            
    "slogan""Land of Enchantment"
        
    }, {
            
    "abbr""NY",
            
    "name""New York",
            
    "slogan""Empire State"
        
    }, {
            
    "abbr""NC",
            
    "name""North Carolina",
            
    "slogan""First in Freedom"
        
    }, {
            
    "abbr""ND",
            
    "name""North Dakota",
            
    "slogan""Peace Garden State"
        
    }, {
            
    "abbr""OH",
            
    "name""Ohio",
            
    "slogan""The Heart of it All"
        
    }, {
            
    "abbr""OK",
            
    "name""Oklahoma",
            
    "slogan""Oklahoma is OK"
        
    }, {
            
    "abbr""OR",
            
    "name""Oregon",
            
    "slogan""Pacific Wonderland"
        
    }, {
            
    "abbr""PA",
            
    "name""Pennsylvania",
            
    "slogan""Keystone State"
        
    }, {
            
    "abbr""RI",
            
    "name""Rhode Island",
            
    "slogan""Ocean State"
        
    }, {
            
    "abbr""SC",
            
    "name""South Carolina",
            
    "slogan""Nothing Could be Finer"
        
    }, {
            
    "abbr""SD",
            
    "name""South Dakota",
            
    "slogan""Great Faces, Great Places"
        
    }, {
            
    "abbr""TN",
            
    "name""Tennessee",
            
    "slogan""Volunteer State"
        
    }, {
            
    "abbr""TX",
            
    "name""Texas",
            
    "slogan""Lone Star State"
        
    }, {
            
    "abbr""UT",
            
    "name""Utah",
            
    "slogan""Salt Lake State"
        
    }, {
            
    "abbr""VT",
            
    "name""Vermont",
            
    "slogan""Green Mountain State"
        
    }, {
            
    "abbr""VA",
            
    "name""Virginia",
            
    "slogan""Mother of States"
        
    }, {
            
    "abbr""WA",
            
    "name""Washington",
            
    "slogan""Green Tree State"
        
    }, {
            
    "abbr""WV",
            
    "name""West Virginia",
            
    "slogan""Mountain State"
        
    }, {
            
    "abbr""WI",
            
    "name""Wisconsin",
            
    "slogan""America's Dairyland"
        
    }, {
            
    "abbr""WY",
            
    "name""Wyoming",
            
    "slogan""Like No Place on Earth"
        
    }]
    });

    Ext.onReady(function() { 
        
    Ext.create('Ext.form.FormPanel', { 
            
    renderToExt.getBody(), 
            
    title'Form Panel'
            
    bodyStyle'padding:5px 5px 0'
            
    width800
            
    height700
            
    fieldDefaults: { 
                
    labelAlign'top'
                
    msgTarget'side' 
            
    }, 
            
    layout: {
                
    type'vbox',
                
    align'stretch'    
            
    },
            
    defaults: {
                
    xtype'container',
                
    layout: {
                    
    type'hbox',
                    
    align'top',
                    
    defaultMargins: {
                        
    right10
                    
    }
                }
            },
            
    items: [{
                
    items: [{
                    
    xtype'radiogroup',
                    
    flex1,
                    
    fieldLabel'[Payment Method]',
                    
    items: [{
                        
    boxLabel'[Credit Card]',
                        
    name'paymentMethod',
                        
    inputValue'CC',
                        
    checkedtrue
                    
    }, {
                        
    boxLabel'[Saved Account]',
                        
    name'paymentMethod',
                        
    inputValue'SA'
                    
    }]
                }, {
                    
    xtype'combo',
                    
    flex1,
                    
    fieldLabel'[Account]',
                    
    name'state',
                    
    store'State',
                    
    queryMode'local',
                    
    displayField'name'
                
    }]
            }, {
                
    items: [{
                    
    xtype'combo',
                    
    flex1,
                    
    fieldLabel'Credit Card Type',
                    
    name'state',
                    
    store'State',
                    
    queryMode'local',
                    
    displayField'name'
                
    }, {
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[Credit Card Number]',
                    
    name'lastName'
                
    }]
            }, {
                
    items: [{
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[Verification Number]',
                    
    name'address'
                
    }, {
                    
    xtype'fieldcontainer',
                    
    flex1,
                    
    fieldLabel'[Expiration Date]',
                    
    layout: {
                        
    type'hbox'
                    
    },
                    
    defaults: {
                        
    hideLabeltrue
                    
    },
                    
    items: [{
                        
    xtype'combo',
                        
    flex1,
                        
    name'state',
                        
    store'State',
                        
    queryMode'local',
                        
    displayField'name',
                        
    margins: {
                            
    right5
                        
    }
                    }, {
                        
    xtype'combo',
                        
    flex1,
                        
    name'state',
                        
    store'State',
                        
    queryMode'local',
                        
    displayField'name'
                    
    }]
                }]
            }, {
                
    items: [{
                    
    xtype'checkbox',
                    
    checkedtrue,
                    
    flex1,
                    
    boxLabel'[My billing contact information is the same as my shipping information.]',
                    
    name'billingCopy'
                
    }]
            }, {
                
    items: [{
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[First Name]',
                    
    name'firstName'
                
    }, {
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[Last Name]',
                    
    name'lastName'
                
    }]
            }, {
                
    items: [{
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[Address]',
                    
    name'address'
                
    }, {
                    
    xtype'component',
                    
    flex1
                
    }]
            }, {
                
    items: [{
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[City]',
                    
    name'city'
                
    }, {
                    
    xtype'container',
                    
    flex1,
                    
    layout: {
                        
    type'hbox'
                    
    },
                    
    items: [{
                        
    xtype'combo',
                        
    flex1,
                        
    fieldLabel'[State]',
                        
    name'state',
                        
    store'State',
                        
    queryMode'local',
                        
    displayField'name',
                        
    margins: {
                            
    right5
                        
    }
                    }, {
                        
    xtype'textfield',
                        
    flex1,
                        
    fieldLabel'[Zip]',
                        
    name'zip'
                    
    }]
                }]
                        }, {
                
    items: [{
                    
    xtype'checkbox',
                    
    checkedtrue,
                    
    flex1,
                    
    boxLabel'[Save my card information for future use.]',
                    
    name'accountSave'
                
    }]
            }, {
                
    items: [{
                    
    xtype'textfield',
                    
    flex1,
                    
    fieldLabel'[Account Nickname]',
                    
    name'accountNickname'
                
    }, {
                    
    xtype'component',
                    
    flex1
                
    }]
            }], 
            
    buttons: ['->', { 
                
    text'Save' 
            
    }, { 
                
    text'Cancel' 
            
    }] 
        }); 
    }); 

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, it's a problem with processing margins... Here's simplified testcase:

    Code:
    Ext.require(['*']);  
    
    Ext.onReady(function() {  
        Ext.create('Ext.form.FormPanel', {  
            renderTo: Ext.getBody(),  
            title: 'Form Panel',  
            width: 600,  
            height: 200,  
            layout: {  
                type: 'hbox'
            },  
            items: [{ 
                flex: 1,
                xtype: 'textfield',
                fieldLabel: 'Field1',
                margins: {       // This is causing the problem
                    right: 5 
                } 
            }, { 
                flex: 1, 
                xtype: 'textfield', 
                fieldLabel: 'Field 2'
            }] 
        });  
    });
    Remove the margins config and it works.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, it's just a problem when parsing object style margins specs which do not specify all 4 margins.

    The unspecified ones end up as NaNs.

    If you change to

    Code:
    margins: '0 5px 0 0'
    or

    Code:
    margins: {
        top: 0, right: 5, bottom: 0, left: 0
    }
    It works.

    I'll fix it right now.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    THis is fixed.

    But there's no way in this new forum set up that I can edit the thread title.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You have to click "Edit Post", and then when the editing UI appears, click the "Edit Post" again! It seems to be the only way.

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    547
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default


    Specifying all the margins did the trick.

Similar Threads

  1. Replies: 6
    Last Post: 8 Mar 2011, 2:54 PM
  2. Problem with nested Layout (vbox/hbox)
    By Naokai in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 3 Jan 2011, 8:20 AM
  3. Form Layout 'vbox' and 'hbox'
    By KSagar in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 13 Jan 2010, 7:12 AM
  4. hbox/vbox layout problems
    By bobthebuilder in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 25 Jun 2009, 4:52 PM

Thread Participants: 2