-
3 Mar 2011 10:10 AM #1Ext JS Premium Member
- Join Date
- Apr 2010
- Location
- Omaha, NE
- Posts
- 507
- Vote Rating
- 18
[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', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 600,
height: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
layout: {
type: 'hbox',
align: 'top'
}
},
items: [{
items: [{
xtype: 'radiogroup',
flex: 1,
fieldLabel: '[Payment Method]',
items: [{
boxLabel: '[Credit Card]',
name: 'paymentMethod',
inputValue: 'CC',
checked: true,
margins: {
right: 5
}
}, {
boxLabel: '[Saved Account]',
name: 'paymentMethod',
inputValue: 'SA'
}]
}, {
xtype: 'combo',
flex: 1,
fieldLabel: 'Account',
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name',
margins: {
right: 5
}
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[First Name]',
name: 'firstName'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Last Name]',
name: 'lastName'
}]
}],
buttons: ['->', {
text: 'Save'
}, {
text: 'Cancel'
}]
});
});
-
3 Mar 2011 10:12 AM #2Sencha - Sencha Touch Dev Team
- Join Date
- Mar 2007
- Location
- Redwood City, California
- Posts
- 3,653
- Vote Rating
- 14
Seems like the same issue. But more test cases are a good thing.
-
3 Mar 2011 1:11 PM #3Ext JS Premium Member
- Join Date
- Apr 2010
- Location
- Omaha, NE
- Posts
- 507
- Vote Rating
- 18
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.
Originally Posted by Jamie Avins
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', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 800,
height: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
layout: {
type: 'hbox',
align: 'top'
}
},
items: [{
items: [{
xtype: 'combo',
flex: 1,
fieldLabel: 'Credit Card Type',
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Credit Card Number]',
name: 'lastName'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Verification Number]',
name: 'address'
}, {
xtype: 'fieldcontainer',
flex: 1,
fieldLabel: '[Expiration Date]',
layout: {
type: 'hbox'
},
// Comment out the next 3 lines to see additional issues
defaults: {
hideLabel: true
},
items: [{
xtype: 'combo',
flex: 1,
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name',
margins: {
right: 5
}
}, {
xtype: 'combo',
flex: 1,
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name'
}]
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[City]',
name: 'city'
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'hbox'
},
items: [{
xtype: 'combo',
flex: 1,
fieldLabel: '[State]',
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name',
margins: {
right: 5
}
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Zip]',
name: 'zip'
}]
}]
}],
buttons: ['->', {
text: 'Save'
}, {
text: 'Cancel'
}]
});
});
-
3 Mar 2011 1:56 PM #4Ext JS Premium Member
- Join Date
- Apr 2010
- Location
- Omaha, NE
- Posts
- 507
- Vote Rating
- 18
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', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 800,
height: 700,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
layout: {
type: 'hbox',
align: 'top',
defaultMargins: {
right: 10
}
}
},
items: [{
items: [{
xtype: 'radiogroup',
flex: 1,
fieldLabel: '[Payment Method]',
items: [{
boxLabel: '[Credit Card]',
name: 'paymentMethod',
inputValue: 'CC',
checked: true
}, {
boxLabel: '[Saved Account]',
name: 'paymentMethod',
inputValue: 'SA'
}]
}, {
xtype: 'combo',
flex: 1,
fieldLabel: '[Account]',
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name'
}]
}, {
items: [{
xtype: 'combo',
flex: 1,
fieldLabel: 'Credit Card Type',
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Credit Card Number]',
name: 'lastName'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Verification Number]',
name: 'address'
}, {
xtype: 'fieldcontainer',
flex: 1,
fieldLabel: '[Expiration Date]',
layout: {
type: 'hbox'
},
defaults: {
hideLabel: true
},
items: [{
xtype: 'combo',
flex: 1,
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name',
margins: {
right: 5
}
}, {
xtype: 'combo',
flex: 1,
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name'
}]
}]
}, {
items: [{
xtype: 'checkbox',
checked: true,
flex: 1,
boxLabel: '[My billing contact information is the same as my shipping information.]',
name: 'billingCopy'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[First Name]',
name: 'firstName'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Last Name]',
name: 'lastName'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Address]',
name: 'address'
}, {
xtype: 'component',
flex: 1
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[City]',
name: 'city'
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'hbox'
},
items: [{
xtype: 'combo',
flex: 1,
fieldLabel: '[State]',
name: 'state',
store: 'State',
queryMode: 'local',
displayField: 'name',
margins: {
right: 5
}
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Zip]',
name: 'zip'
}]
}]
}, {
items: [{
xtype: 'checkbox',
checked: true,
flex: 1,
boxLabel: '[Save my card information for future use.]',
name: 'accountSave'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Account Nickname]',
name: 'accountNickname'
}, {
xtype: 'component',
flex: 1
}]
}],
buttons: ['->', {
text: 'Save'
}, {
text: 'Cancel'
}]
});
});
-
5 Mar 2011 12:54 AM #5Sencha - Ext JS Dev Team
- Join Date
- Mar 2007
- Location
- Notts/Redwood City
- Posts
- 30,458
- Vote Rating
- 20
OK, it's a problem with processing margins... Here's simplified testcase:
Remove the margins config and it works.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' }] }); });Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
Scope: http://extjs.com/forum/showthread.ph...642#post257642
-
5 Mar 2011 1:10 AM #6Sencha - Ext JS Dev Team
- Join Date
- Mar 2007
- Location
- Notts/Redwood City
- Posts
- 30,458
- Vote Rating
- 20
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
orCode:margins: '0 5px 0 0'
It works.Code:margins: { top: 0, right: 5, bottom: 0, left: 0 }
I'll fix it right now.Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
Scope: http://extjs.com/forum/showthread.ph...642#post257642
-
5 Mar 2011 1:24 AM #7Sencha - Ext JS Dev Team
- Join Date
- Mar 2007
- Location
- Notts/Redwood City
- Posts
- 30,458
- Vote Rating
- 20
THis is fixed.
But there's no way in this new forum set up that I can edit the thread title.Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
Scope: http://extjs.com/forum/showthread.ph...642#post257642
-
5 Mar 2011 3:56 AM #8Sencha - Ext JS Dev Team
- Join Date
- Mar 2007
- Location
- Notts/Redwood City
- Posts
- 30,458
- Vote Rating
- 20
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.
Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
Scope: http://extjs.com/forum/showthread.ph...642#post257642
-
7 Mar 2011 7:54 AM #9Ext JS Premium Member
- Join Date
- Apr 2010
- Location
- Omaha, NE
- Posts
- 507
- Vote Rating
- 18
Specifying all the margins did the trick.
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.
Reply With Quote
Similar Threads
-
[FIXED] Wide label problem in form with vbox layout with hbox items
By estesbubba in forum Ext:BugsReplies: 6Last Post: 8 Mar 2011, 2:54 PM -
Problem with nested Layout (vbox/hbox)
By Naokai in forum Ext 3.x: Help & DiscussionReplies: 0Last Post: 3 Jan 2011, 8:20 AM -
Form Layout 'vbox' and 'hbox'
By KSagar in forum Ext 3.x: Help & DiscussionReplies: 8Last Post: 13 Jan 2010, 7:12 AM -
hbox/vbox layout problems
By bobthebuilder in forum Ext 3.x: Help & DiscussionReplies: 11Last Post: 25 Jun 2009, 4:52 PM