Results 1 to 9 of 9

Thread: [FIXED]Found another hbox in vbox form layout problem

    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
    629
    Vote Rating
    41
      0  

    Default [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 User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      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
    629
    Vote Rating
    41
      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
    629
    Vote Rating
    41
      0  

    Default 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
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      0  

    Default

    THis is fixed.

    But there's no way in this new forum set up that I can edit the thread title.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    629
    Vote Rating
    41
      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

Posting Permissions

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