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
    555
    Vote Rating
    24
    estesbubba will become famous soon enough 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 User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    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
    555
    Vote Rating
    24
    estesbubba will become famous soon enough 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
    555
    Vote Rating
    24
    estesbubba will become famous soon enough 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,499
    Vote Rating
    47
    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,499
    Vote Rating
    47
    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,499
    Vote Rating
    47
    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,499
    Vote Rating
    47
    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
    555
    Vote Rating
    24
    estesbubba will become famous soon enough 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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi