PDA

View Full Version : [Solved] FieldSet and labelWidth problem



mohaaron
23 Jun 2009, 9:42 AM
I have a fieldset with a textfield and a label and the label width is too small. No matter what I do I can't get the labelWidth to change the the actual with of the label text. I want it all on one line instead of the wrapping it has now. Can anyone tell me what I'm doing wrong?

Here is the code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content goes here</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc2/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc2/ext-all-debug.js"></script>
<script src="../Scripts/InputTextMask.js" type="text/javascript"></script>
<script src="../Scripts/XCheckbox.js" type="text/javascript"></script>
<style type="text/css">
.xcheckbox-wrap {
line-height: 18px;
padding-top:2px;
}
.xcheckbox-wrap a {
display:block;
width:16px;
height:16px;
float:left;
}
.x-toolbar .xcheckbox-wrap {
padding: 0 0 2px 0;
}
.xcheckbox-on {
background:transparent url(../Scripts/ext-3.0-rc2/resources/images/default/menu/checked.gif) no-repeat 0 0;
}
.xcheckbox-off {
background:transparent url(../Scripts/ext-3.0-rc2/resources/images/default/menu/unchecked.gif) no-repeat 0 0;
}
.xcheckbox-disabled {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
cursor:default;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../Scripts/ext-3.0-rc2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var leftPanel = new Ext.Panel({
id: 'leftPanel',
region: 'west',
layout: 'border',
border: true,
collapsible: true,
split: true,
width: 300,
items: [{
xtype: 'panel',
region: 'north',
html: 'Grid Panel'
}, {
xtype: 'panel',
region: 'center',
html: 'Search Panel'
}]
});

var toolbar = new Ext.Toolbar({
region: 'north',
//height: 20, // Toolbars only need height if they are empty.
items: [{
xtype: 'tbbutton',
text: 'Menu Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
}]
});

var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
items: [{
xtype: 'panel',
title: 'Summary',
layout: 'form',
height: 130,
items: [{
fieldLabel: 'FixNoteId',
name: 'txtFixNoteId',
xtype: 'displayfield'
}, {
fieldLabel: 'Summary',
name: 'txtSummary',
xtype: 'displayfield'
}, {
fieldLabel: 'Entered',
name: 'txtDateEntered',
xtype: 'displayfield'
}, {
fieldLabel: 'Planned Version',
name: 'txtPvVersion',
xtype: 'displayfield'
}]
}, {
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange:true,
deferredLayout: false,
plain: true,
border: false,
activeTab: 0,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
},
items: [ // Tab Panel Tabs/Items
{ // Tab: F2-General
title: 'F2-General',
layout: 'form',
defaultType: 'textfield',
items: [ // Tab: F2-General Items
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}, {
xtype: 'panel',
border: false,
layout: 'column',
width: 600,
items: [{
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 120,
items: [{
xtype: 'textfield',
maxLength: 20,
fieldLabel: 'Reported in version',
name: 'Version'
}, {
xtype: 'datefield',
type: 'date',
fieldLabel: 'Date modified',
name: 'DateModified',
allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}, {
xtype: 'combo',
id: 'prdCombo',
name: 'prdCombo',
fieldLabel: 'Product class',
valueNotFoundText: 'Value not found...',
valueField: 'PrdClass', // The value field from the combo query.
displayField: 'PrdDesc', // The text field from the combo query.
hiddenName: 'PrdClass', // Hidden name should be the same as column name in the database query for this field.
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a product'
}, {
xtype: 'combo',
id: 'pVersionCombo',
name: 'pVersionCombo',
fieldLabel: 'Planned',
valueNotFoundText: 'Value not found...',
valueField: 'PvVersion',
displayField: 'PvDesc',
hiddenName: 'PvVersion',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a version'
}, {
xtype: 'textfield',
maxLength: 15,
fieldLabel: 'PV Priority',
name: 'PvPriority'
}, {
xtype: 'combo',
id: 'assignToCombo',
name: 'assignToCombo',
fieldLabel: 'Assignee',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'AssignedTo',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select an assignee'
}, {
xtype: 'combo',
id: 'menuCombo',
name: 'menuCombo',
fieldLabel: 'Menu',
valueNotFoundText: 'Value not found...',
valueField: 'CNExTSubfunction',
displayField: 'CNExTSubfunction',
hiddenName: 'MenuName',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a function'
}]
}, {
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 80,
items: [{
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Reported by',
name: 'ReportedBy'
}, {
xtype: 'textfield',
maxLength: 10,
fieldLabel: 'Verified by',
name: 'VerifiedBy'
}, {
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Updated by',
name: 'UpdatedBy'
}, {
xtype: 'combo',
id: 'groupCombo',
name: 'groupCombo',
fieldLabel: 'Group',
valueNotFoundText: 'Value not found...',
valueField: 'PvgName',
displayField: 'PvgName',
hiddenName: 'PvGroup',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a group'
}, {
xtype: 'combo',
id: 'priorityCombo',
name: 'priorityCombo',
fieldLabel: 'Priority',
valueNotFoundText: 'Value not found...',
valueField: 'Code',
displayField: 'Label',
hiddenName: 'Priority',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a priority'
}, {
xtype: 'combo',
id: 'importanceCombo',
name: 'importanceCombo',
fieldLabel: 'Seriousness',
//valueNotFoundText: 'Value not found...',
valueField: 'Code',
displayField: 'Label',
hiddenName: 'Seriousness',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a seriousness'
}]
}]
}, {
xtype: 'panel',
border: false,
layout: 'column',
defaults: {layout: 'form'},
width: 600,
items: [{
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 80,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Changes Doc',
name: 'IsChangesDoc'
}]
}, {
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 90,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Release Notes',
name: 'IsReleaseNotes'
}]
}, {
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 100,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Known Problems',
name: 'IsKnownProb'
}]
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'Description',
height: 200,
anchor: '98%'
}] // END: F2-General Items
}, { // Tab: F3-Programmer Status
title: 'F3-Programmer Status',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F3-Programmer Status Items
{
xtype: 'panel',
border: true,
layout: 'column',
//defaults: {layout: 'form'},
//width: 600,
items: [{ // BEGIN: Columns
columnWidth: .1,
layout: 'form',
border: false,
labelWidth: 30,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Fixed',
name: 'Fixed'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'combo',
id: 'fixedByCombo',
name: 'fixedByCombo',
fieldLabel: 'By',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'FixedBy',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'datefield',
type: 'date',
fieldLabel: 'On',
name: 'FixDate',
//allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 55,
items: [{
xtype: 'textfield',
fieldLabel: 'Fixed ver',
maxLength: 10,
name: 'FixedInVersion'
}]
}] // END: Columns
}, {
xtype: 'fieldset',
labelAlign: 'left',
title: 'Project Planning',
//autoWidth: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Estimated # of Effert Days',
labelWidth: 300,
maxLength: 1,
width: 20,
name: 'EffortDays'
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Status',
name: 'Status',
height: 200,
anchor: '98%'
}] // END: F3-Programmer Status Items
}, { // Tab: F4-Solution/Known Problem
title: 'F4-Solution/Known Problem',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F4-Solution/Known Problem Items
{
xtype: 'htmleditor',
fieldLabel: 'Solution',
name: 'Solution',
height: 200,
anchor: '98%'
}, {
xtype: 'htmleditor',
fieldLabel: 'KnownProb',
name: 'KnownProb',
height: 200,
anchor: '98%'
}] // END: F4-Solution/Known Problem Items
}, { // Tab: F5-Test
title: 'F5-Test',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F5-Test Items
{
xtype: 'htmleditor',
fieldLabel: 'Test Notes',
name: 'TestNotes',
height: 200,
anchor: '98%'
}] // END: F5-Test Items
}]
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'toolbar',
region: 'north',
height: 30,
items: [{
xtype: 'tbbutton',
text: 'Button'
}]},
leftPanel,
mainForm
]
});
});
</script>
</head>

<body>

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</html>

mohaaron
23 Jun 2009, 10:26 AM
I've changed this up a bit and moved to using a layout: 'table' because I need to do a rowspan of 2. Here is the updated code and image where you can see that the problem is the same. No matter what I try and can't get the label width for "Label width does not work" to change.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content goes here</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc2/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc2/ext-all-debug.js"></script>
<script src="../Scripts/InputTextMask.js" type="text/javascript"></script>
<script src="../Scripts/XCheckbox.js" type="text/javascript"></script>
<style type="text/css">
.xcheckbox-wrap {
line-height: 18px;
padding-top:2px;
}
.xcheckbox-wrap a {
display:block;
width:16px;
height:16px;
float:left;
}
.x-toolbar .xcheckbox-wrap {
padding: 0 0 2px 0;
}
.xcheckbox-on {
background:transparent url(../Scripts/ext-3.0-rc2/resources/images/default/menu/checked.gif) no-repeat 0 0;
}
.xcheckbox-off {
background:transparent url(../Scripts/ext-3.0-rc2/resources/images/default/menu/unchecked.gif) no-repeat 0 0;
}
.xcheckbox-disabled {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
cursor:default;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../Scripts/ext-3.0-rc2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var leftPanel = new Ext.Panel({
id: 'leftPanel',
region: 'west',
layout: 'border',
border: true,
collapsible: true,
split: true,
width: 300,
items: [{
xtype: 'panel',
region: 'north',
html: 'Grid Panel'
}, {
xtype: 'panel',
region: 'center',
html: 'Search Panel'
}]
});

var toolbar = new Ext.Toolbar({
region: 'north',
//height: 20, // Toolbars only need height if they are empty.
items: [{
xtype: 'tbbutton',
text: 'Menu Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
}]
});

var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
items: [{
xtype: 'panel',
title: 'Summary',
layout: 'form',
height: 130,
items: [{
fieldLabel: 'FixNoteId',
name: 'txtFixNoteId',
xtype: 'displayfield'
}, {
fieldLabel: 'Summary',
name: 'txtSummary',
xtype: 'displayfield'
}, {
fieldLabel: 'Entered',
name: 'txtDateEntered',
xtype: 'displayfield'
}, {
fieldLabel: 'Planned Version',
name: 'txtPvVersion',
xtype: 'displayfield'
}]
}, {
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange:true,
deferredLayout: false,
plain: true,
border: false,
activeTab: 0,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
},
items: [ // Tab Panel Tabs/Items
{ // Tab: F2-General
title: 'F2-General',
layout: 'form',
defaultType: 'textfield',
items: [ // Tab: F2-General Items
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}, {
xtype: 'panel',
border: false,
layout: 'column',
width: 600,
items: [{
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 120,
items: [{
xtype: 'textfield',
maxLength: 20,
fieldLabel: 'Reported in version',
name: 'Version'
}, {
xtype: 'datefield',
type: 'date',
fieldLabel: 'Date modified',
name: 'DateModified',
allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}, {
xtype: 'combo',
id: 'prdCombo',
name: 'prdCombo',
fieldLabel: 'Product class',
valueNotFoundText: 'Value not found...',
valueField: 'PrdClass', // The value field from the combo query.
displayField: 'PrdDesc', // The text field from the combo query.
hiddenName: 'PrdClass', // Hidden name should be the same as column name in the database query for this field.
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a product'
}, {
xtype: 'combo',
id: 'pVersionCombo',
name: 'pVersionCombo',
fieldLabel: 'Planned',
valueNotFoundText: 'Value not found...',
valueField: 'PvVersion',
displayField: 'PvDesc',
hiddenName: 'PvVersion',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a version'
}, {
xtype: 'textfield',
maxLength: 15,
fieldLabel: 'PV Priority',
name: 'PvPriority'
}, {
xtype: 'combo',
id: 'assignToCombo',
name: 'assignToCombo',
fieldLabel: 'Assignee',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'AssignedTo',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select an assignee'
}, {
xtype: 'combo',
id: 'menuCombo',
name: 'menuCombo',
fieldLabel: 'Menu',
valueNotFoundText: 'Value not found...',
valueField: 'CNExTSubfunction',
displayField: 'CNExTSubfunction',
hiddenName: 'MenuName',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a function'
}]
}, {
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 80,
items: [{
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Reported by',
name: 'ReportedBy'
}, {
xtype: 'textfield',
maxLength: 10,
fieldLabel: 'Verified by',
name: 'VerifiedBy'
}, {
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Updated by',
name: 'UpdatedBy'
}, {
xtype: 'combo',
id: 'groupCombo',
name: 'groupCombo',
fieldLabel: 'Group',
valueNotFoundText: 'Value not found...',
valueField: 'PvgName',
displayField: 'PvgName',
hiddenName: 'PvGroup',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a group'
}, {
xtype: 'combo',
id: 'priorityCombo',
name: 'priorityCombo',
fieldLabel: 'Priority',
valueNotFoundText: 'Value not found...',
valueField: 'Code',
displayField: 'Label',
hiddenName: 'Priority',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a priority'
}, {
xtype: 'combo',
id: 'importanceCombo',
name: 'importanceCombo',
fieldLabel: 'Seriousness',
//valueNotFoundText: 'Value not found...',
valueField: 'Code',
displayField: 'Label',
hiddenName: 'Seriousness',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a seriousness'
}]
}]
}, {
xtype: 'panel',
border: false,
layout: 'column',
defaults: {layout: 'form'},
width: 600,
items: [{
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 80,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Changes Doc',
name: 'IsChangesDoc'
}]
}, {
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 90,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Release Notes',
name: 'IsReleaseNotes'
}]
}, {
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 100,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Known Problems',
name: 'IsKnownProb'
}]
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'Description',
height: 200,
anchor: '98%'
}] // END: F2-General Items
}, { // Tab: F3-Programmer Status
title: 'F3-Programmer Status',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F3-Programmer Status Items
{
xtype: 'panel',
border: true,
layout: 'column',
//defaults: {layout: 'form'},
//width: 600,
items: [{ // BEGIN: Columns
columnWidth: .1,
layout: 'form',
border: false,
labelWidth: 30,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Fixed',
name: 'Fixed'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'combo',
id: 'fixedByCombo',
name: 'fixedByCombo',
fieldLabel: 'By',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'FixedBy',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'datefield',
type: 'date',
fieldLabel: 'On',
name: 'FixDate',
//allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 55,
items: [{
xtype: 'textfield',
fieldLabel: 'Fixed ver',
maxLength: 10,
name: 'FixedInVersion'
}]
}] // END: Columns
}, {
xtype: 'fieldset',
layout: 'table',
layoutConfig: {columns: 2},
labelAlign: 'left',
title: 'Project Planning',
// autoWidth: true,
items: [
{
colspan: 2,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Label width does not work',
labelWidth: 300,
maxLength: 1,
width: 20,
name: 'ColumnName'
}]
},
{
//columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name1',
labelWidth: 10,
maxLength: 1,
width: 20,
name: 'Name1'
}]
}, {
//columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name2',
labelWidth: 10,
maxLength: 1,
width: 20,
name: 'Name2'
}]
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Status',
name: 'Status',
height: 200,
anchor: '98%'
}] // END: F3-Programmer Status Items
}, { // Tab: F4-Solution/Known Problem
title: 'F4-Solution/Known Problem',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F4-Solution/Known Problem Items
{
xtype: 'htmleditor',
fieldLabel: 'Solution',
name: 'Solution',
height: 200,
anchor: '98%'
}, {
xtype: 'htmleditor',
fieldLabel: 'KnownProb',
name: 'KnownProb',
height: 200,
anchor: '98%'
}] // END: F4-Solution/Known Problem Items
}, { // Tab: F5-Test
title: 'F5-Test',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F5-Test Items
{
xtype: 'htmleditor',
fieldLabel: 'Test Notes',
name: 'TestNotes',
height: 200,
anchor: '98%'
}] // END: F5-Test Items
}]
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'toolbar',
region: 'north',
height: 30,
items: [{
xtype: 'tbbutton',
text: 'Button'
}]},
leftPanel,
mainForm
]
});
});
</script>
</head>

<body>

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</html>

carol.ext
23 Jun 2009, 10:42 AM
I haven't looked at your new code in second post, but did you try putting the labelWidth in the fieldset instead of the textfield config?


{
xtype: 'fieldset',
labelAlign: 'left',
title: 'Project Planning',
//autoWidth: false,
labelWidth: 200,
items: [{
xtype: 'textfield',
fieldLabel: 'Estimated # of Effert Days',
//labelWidth: 300,
maxLength: 1,
width: 20,
name: 'EffortDays'
}]
}

mohaaron
23 Jun 2009, 10:59 AM
Moving labelWidth to the fieldset did work but now the other two Name1 and Name2 are forced out too wide. What I would like is to have LabelWidthError set to 300, then Name1 and Name2 set to 40.

I can see in FireBug that when I set the labelWidth for each item the resulting html has all three table cells set to 100. If I do as suggested and move the labelWidth to the fieldset then all three items are set that the fieldset value. Why can I not set the width of each individual item?

You can see the result of this in this code and pic.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content goes here</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc2/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc2/ext-all-debug.js"></script>
<script src="../Scripts/InputTextMask.js" type="text/javascript"></script>
<script src="../Scripts/XCheckbox.js" type="text/javascript"></script>
<style type="text/css">
.xcheckbox-wrap {
line-height: 18px;
padding-top:2px;
}
.xcheckbox-wrap a {
display:block;
width:16px;
height:16px;
float:left;
}
.x-toolbar .xcheckbox-wrap {
padding: 0 0 2px 0;
}
.xcheckbox-on {
background:transparent url(../Scripts/ext-3.0-rc2/resources/images/default/menu/checked.gif) no-repeat 0 0;
}
.xcheckbox-off {
background:transparent url(../Scripts/ext-3.0-rc2/resources/images/default/menu/unchecked.gif) no-repeat 0 0;
}
.xcheckbox-disabled {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
cursor:default;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../Scripts/ext-3.0-rc2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var leftPanel = new Ext.Panel({
id: 'leftPanel',
region: 'west',
layout: 'border',
border: true,
collapsible: true,
split: true,
width: 300,
items: [{
xtype: 'panel',
region: 'north',
html: 'Grid Panel'
}, {
xtype: 'panel',
region: 'center',
html: 'Search Panel'
}]
});

var toolbar = new Ext.Toolbar({
region: 'north',
//height: 20, // Toolbars only need height if they are empty.
items: [{
xtype: 'tbbutton',
text: 'Menu Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
}]
});

var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
items: [{
xtype: 'panel',
title: 'Summary',
layout: 'form',
height: 130,
items: [{
fieldLabel: 'FixNoteId',
name: 'txtFixNoteId',
xtype: 'displayfield'
}, {
fieldLabel: 'Summary',
name: 'txtSummary',
xtype: 'displayfield'
}, {
fieldLabel: 'Entered',
name: 'txtDateEntered',
xtype: 'displayfield'
}, {
fieldLabel: 'Planned Version',
name: 'txtPvVersion',
xtype: 'displayfield'
}]
}, {
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange:true,
deferredLayout: false,
plain: true,
border: false,
activeTab: 0,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
},
items: [ // Tab Panel Tabs/Items
{ // Tab: F2-General
title: 'F2-General',
layout: 'form',
defaultType: 'textfield',
items: [ // Tab: F2-General Items
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}, {
xtype: 'panel',
border: false,
layout: 'column',
width: 600,
items: [{
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 120,
items: [{
xtype: 'textfield',
maxLength: 20,
fieldLabel: 'Reported in version',
name: 'Version'
}, {
xtype: 'datefield',
type: 'date',
fieldLabel: 'Date modified',
name: 'DateModified',
allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}, {
xtype: 'combo',
id: 'prdCombo',
name: 'prdCombo',
fieldLabel: 'Product class',
valueNotFoundText: 'Value not found...',
valueField: 'PrdClass', // The value field from the combo query.
displayField: 'PrdDesc', // The text field from the combo query.
hiddenName: 'PrdClass', // Hidden name should be the same as column name in the database query for this field.
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a product'
}, {
xtype: 'combo',
id: 'pVersionCombo',
name: 'pVersionCombo',
fieldLabel: 'Planned',
valueNotFoundText: 'Value not found...',
valueField: 'PvVersion',
displayField: 'PvDesc',
hiddenName: 'PvVersion',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a version'
}, {
xtype: 'textfield',
maxLength: 15,
fieldLabel: 'PV Priority',
name: 'PvPriority'
}, {
xtype: 'combo',
id: 'assignToCombo',
name: 'assignToCombo',
fieldLabel: 'Assignee',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'AssignedTo',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select an assignee'
}, {
xtype: 'combo',
id: 'menuCombo',
name: 'menuCombo',
fieldLabel: 'Menu',
valueNotFoundText: 'Value not found...',
valueField: 'CNExTSubfunction',
displayField: 'CNExTSubfunction',
hiddenName: 'MenuName',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a function'
}]
}, {
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 80,
items: [{
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Reported by',
name: 'ReportedBy'
}, {
xtype: 'textfield',
maxLength: 10,
fieldLabel: 'Verified by',
name: 'VerifiedBy'
}, {
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Updated by',
name: 'UpdatedBy'
}, {
xtype: 'combo',
id: 'groupCombo',
name: 'groupCombo',
fieldLabel: 'Group',
valueNotFoundText: 'Value not found...',
valueField: 'PvgName',
displayField: 'PvgName',
hiddenName: 'PvGroup',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a group'
}, {
xtype: 'combo',
id: 'priorityCombo',
name: 'priorityCombo',
fieldLabel: 'Priority',
valueNotFoundText: 'Value not found...',
valueField: 'Code',
displayField: 'Label',
hiddenName: 'Priority',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a priority'
}, {
xtype: 'combo',
id: 'importanceCombo',
name: 'importanceCombo',
fieldLabel: 'Seriousness',
//valueNotFoundText: 'Value not found...',
valueField: 'Code',
displayField: 'Label',
hiddenName: 'Seriousness',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a seriousness'
}]
}]
}, {
xtype: 'panel',
border: false,
layout: 'column',
defaults: {layout: 'form'},
width: 600,
items: [{
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 80,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Changes Doc',
name: 'IsChangesDoc'
}]
}, {
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 90,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Release Notes',
name: 'IsReleaseNotes'
}]
}, {
columnWidth: .3,
//layout: 'form',
border: false,
labelWidth: 100,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Known Problems',
name: 'IsKnownProb'
}]
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'Description',
height: 200,
anchor: '98%'
}] // END: F2-General Items
}, { // Tab: F3-Programmer Status
title: 'F3-Programmer Status',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F3-Programmer Status Items
{
xtype: 'panel',
border: true,
layout: 'column',
//defaults: {layout: 'form'},
//width: 600,
items: [{ // BEGIN: Columns
columnWidth: .1,
layout: 'form',
border: false,
labelWidth: 30,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Fixed',
name: 'Fixed'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'combo',
id: 'fixedByCombo',
name: 'fixedByCombo',
fieldLabel: 'By',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'FixedBy',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'datefield',
type: 'date',
fieldLabel: 'On',
name: 'FixDate',
//allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 55,
items: [{
xtype: 'textfield',
fieldLabel: 'Fixed ver',
maxLength: 10,
name: 'FixedInVersion'
}]
}] // END: Columns
}, {
xtype: 'fieldset',
layout: 'table',
layoutConfig: {columns: 2},
labelAlign: 'left',
labelWidth: 300,
title: 'Project Planning',
// autoWidth: true,
items: [
{
colspan: 2,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Label width does not work',
//labelWidth: 300,
maxLength: 1,
width: 20,
name: 'LabelWidthError'
}]
},
{
//columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name1',
labelWidth: 10,
maxLength: 1,
width: 20,
name: 'Name1'
}]
}, {
//columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name1',
labelWidth: 10,
maxLength: 1,
width: 20,
name: 'Name1'
}]
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Status',
name: 'Status',
height: 200,
anchor: '98%'
}] // END: F3-Programmer Status Items
}, { // Tab: F4-Solution/Known Problem
title: 'F4-Solution/Known Problem',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F4-Solution/Known Problem Items
{
xtype: 'htmleditor',
fieldLabel: 'Solution',
name: 'Solution',
height: 200,
anchor: '98%'
}, {
xtype: 'htmleditor',
fieldLabel: 'KnownProb',
name: 'KnownProb',
height: 200,
anchor: '98%'
}] // END: F4-Solution/Known Problem Items
}, { // Tab: F5-Test
title: 'F5-Test',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F5-Test Items
{
xtype: 'htmleditor',
fieldLabel: 'Test Notes',
name: 'TestNotes',
height: 200,
anchor: '98%'
}] // END: F5-Test Items
}]
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'toolbar',
region: 'north',
height: 30,
items: [{
xtype: 'tbbutton',
text: 'Button'
}]},
leftPanel,
mainForm
]
});
});
</script>
</head>

<body>

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</html>

mohaaron
23 Jun 2009, 11:24 AM
Here is a real simple example of the ext code not producing the html I would expect. Why does this not change the label width. Even though I have it set to 300 it's still 100 in the html.

Something else I'm noticing from my previous examples is that I have a panel just above the fieldset that has a layout column and it works just fine. Why is this?

This code is


{
xtype: 'panel',
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Label with a long with',
labelWidth: 300,
maxLength: 1,
width: 20,
name: 'LongLabel'
}]
}
producing this html.


<div id="ext-comp-1044" class="x-panel x-form-label-left">
<div class="x-panel-bwrap" id="ext-gen155">
<div class="x-panel-body x-panel-body-noheader" id="ext-gen156">
<div tabindex="-1" class="x-form-item x-tab-item">
<label class="x-form-item-label" style="width: 100px;" for="ext-comp-1045">Label with a long with:</label>
<div style="padding-left: 105px;" id="x-form-el-ext-comp-1045" class="x-form-element">
<input type="text" name="LongLabel" id="ext-comp-1045" autocomplete="off" size="20" class="x-form-text x-form-field" style="width: 12px;"/>
</div>
<div class="x-form-clear-left"/>
</div>
</div>
</div>
</div>

carol.ext
23 Jun 2009, 12:45 PM
I'm not an expert on this, but labelWidth goes on the container, not the form field itself. Looks like the default value for FormPanel is 100.

The column layout part of your code has the labelWidth on the containers:


items: [{ // BEGIN: Columns
columnWidth: .1,
layout: 'form',
border: false,
labelWidth: 30,
items: [{
xtype: 'xcheckbox',
type: 'bool',
fieldLabel: 'Fixed',
name: 'Fixed'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'combo',
id: 'fixedByCombo',
name: 'fixedByCombo',
fieldLabel: 'By',
valueNotFoundText: 'Value not found...',
valueField: 'AssignId',
displayField: 'AssignName',
hiddenName: 'FixedBy',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...'
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 18,
items: [{
xtype: 'datefield',
type: 'date',
fieldLabel: 'On',
name: 'FixDate',
//allowBlank: false,
width: 140
,plugins: [new Ext.ux.InputTextMask('99/99/9999', true)]
}]
}, {
columnWidth: .30,
layout: 'form',
border: false,
labelWidth: 55,
items: [{
xtype: 'textfield',
fieldLabel: 'Fixed ver',
maxLength: 10,
name: 'FixedInVersion'
}]
}] // END: Columns

mohaaron
23 Jun 2009, 1:07 PM
Your right and this might fix my problem. I'll try moving things around a bit and see what happens. Thanks for the extra pair of eyes.

I do have one question though. The docs state the following. The fieldset specific rule should apply here right?

labelWidth : Number The width of labels. This property cascades to child containers and can be overridden on any child container (e.g., a...
The width of labels. This property cascades to child containers and can be overridden on any child container (e.g., a fieldset can specify a different labelWidth for its fields).

mohaaron
23 Jun 2009, 1:11 PM
Thank you so much. Yes, applying labelWidth on the container did work.

cormip
27 Jun 2009, 11:05 AM
I tried moving labelWidth to the container, up, down, but was unable to get my v2.2.x forms with varying label widths to display properly. The problem appears to be with line 929 of ext-all.css. Once I commented out the width attribute of .x-form-item label then all my forms snapped back to exactly as designed.



.x-form-item label {
display:block;
float:left;
/* width:100px; */
padding:3px;
padding-left:0;
clear:left;
z-index:2;
position:relative;
}Paul Cormier
WinCorp Software, Inc.

tnelson32
9 Dec 2010, 10:42 AM
Thank you so much. Yes, applying labelWidth on the container did work.

this worked for me as well - but is there no way to configure Ext JS to calculate width of a fieldLabel without wrapping it? would be nice to have the fieldwidth calculated based on length of the field so it could adjust the size differently for localized text.