PDA

View Full Version : Having issues with a horizontal scrollbar within a form panel



4 May 2011, 1:41 AM
Hello,

I've been searching this forum for an answer but couldn't find one, there were I believe some issues with defaultType and defaultAnchor, and I already tried them out, but unfortunately without any result. I think there are more people facing this issue.



MyPanel1Ui = Ext.extend(Ext.Panel, {
border: false,
autoScroll: true,
padding: 10,
initComponent: function() {
this.items = [
{
xtype: 'form',
labelWidth: 150,
border: false,
defaultType: 'textfield',
ref: 'formStructureItemEdit',
layoutConfig: {
defaultAnchor: '100%'
},
items: [
{
xtype: 'hidden',
name: 'primary'
},
{
xtype: 'textfield',
allowBlank: false,
blankText: '{t:form-field-required}',
name: 'name',
enableKeyEvents: true,
fieldLabel: '{t:title}',
anchor: '100%',
ref: '../structureTitleField'
},
{
xtype: 'container',
layout: 'form',
items: [
{
xtype: 'container',
layout: 'hbox',
fieldLabel: '{t:link-type}',
items: [
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:internal}',
checked: true,
name: 'linkType',
inputValue: 'internal',
ref: '../../../internalLink'
},
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:external}',
name: 'linkType',
inputValue: 'external',
ref: '../../../externalLink'
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
ref: '../internalLinkComponents',
items: [
{
xtype: 'combo',
fieldLabel: '{t:template}',
anchor: '98%',
store: 'storeStructureTemplates',
valueField: 'id',
loadingText: '{t:loading}',
name: '',
tpl: [
'<tpl for=".">',
'<div ext:qtip="{description}" class="x-combo-list-item"><h2>{name}</h2>',
'<cite>{description}</cite></div>',
'</tpl>'
],
editable: false,
minChars: 0,
displayField: 'name',
allowBlank: false,
blankText: '{t:form-field-required}',
submitValue: true,
hiddenName: 'structure-template',
hiddenValue: 'id',
cls: '',
ctCls: '',
itemCls: 'structureTemplateCombobox',
lazyInit: false,
ref: '../../structureTemplateCombobox'
},
{
xtype: 'container',
layout: 'form',
fieldLabel: '{t:make-default}',
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:yes}',
name: 'default',
inputValue: 'yes'
},
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:no}',
checked: true,
name: 'default',
inputValue: 'no'
}
]
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
hidden: true,
ref: '../externalLinkComponents',
items: [
{
xtype: 'textfield',
fieldLabel: '{t:external-link}',
anchor: '100%',
name: 'externalUrl',
blankText: '{t:form-field-required}',
vtype: 'url',
vtypeText: '{t:invalid-url}',
ref: '../../externalUrlField'
},
{
xtype: 'combo',
fieldLabel: '{t:target-window}',
anchor: '100%',
name: '',
store: 'storeExternalLinkTarget',
mode: 'local',
resizable: true,
displayField: 'value',
hiddenName: 'targetWindow',
editable: false,
autoSelect: false,
triggerAction: 'all',
blankText: '{t:form-field-required}',
ref: '../../targetWindow'
}
]
},
{
xtype: 'container',
layout: 'form',
fieldLabel: '{t:target}',
items: [
{
xtype: 'treepanel',
rootVisible: false,
autoScroll: true,
height: 150,
headerAsText: false,
useArrows: true,
ref: '../../structureItemEditTree',
root: {
text: 'Tree Node',
allowDrag: false,
editable: false
},
loader: {
url: '/admin/contentpro/structure-item/list/'
}
},
{
xtype: 'hidden',
fieldLabel: 'Label',
anchor: '100%',
name: 'target',
ref: '../../structureItemEditTargetField'
},
{
xtype: 'container',
items: [
{
xtype: 'spacer',
height: 5
},
{
xtype: 'button',
text: '{t:undo-selection}',
disabled: true,
iconCls: 'mcp-icon-arrow_refresh_small ',
ref: '../../../clearSelection'
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
disabled: true,
ref: '../insertStructureItemAs',
items: [
{
xtype: 'container',
layout: 'hbox',
fieldLabel: '{t:insert-as}',
items: [
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:previous}',
name: 'insert',
inputValue: 'previous',
checked: true
},
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:next}',
name: 'insert',
inputValue: 'next'
},
{
xtype: 'radio',
flex: 1,
boxLabel: '{t:under}',
name: 'insert',
inputValue: 'child'
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
hidden: true,
items: [
{
xtype: 'container',
layout: 'hbox',
fieldLabel: '{t:publish}',
items: [
{
xtype: 'radio',
boxLabel: '{t:yes}',
name: 'publish',
margins: '0 5px 0 0',
flex: 1,
boxMaxWidth: 100,
inputValue: 'yes',
checked: true
},
{
xtype: 'radio',
boxLabel: '{t:no}',
name: 'publish',
flex: 1,
boxMaxWidth: 100,
inputValue: 'no'
}
]
}
]
},
{
xtype: 'fieldset',
title: '{t:advanced-settings}',
layout: 'auto',
collapsed: true,
collapsible: true,
items: [
{
xtype: 'container',
layout: 'form',
labelWidth: 139,
items: [
{
xtype: 'container',
layout: 'hbox',
fieldLabel: '{t:url-slug}',
items: [
{
xtype: 'textfield',
width: 277,
vtype: 'url-slug',
vtypeText: '{t:invalid-url-slug}',
name: 'friendlyUrl',
allowBlank: false,
blankText: '{t:form-field-required}',
ref: '../../../../structureSlugField'
},
{
xtype: 'spacer',
width: 5
},
{
xtype: 'button',
iconCls: 'mcp-icon-information',
tooltip: '{t:url-slug-description}',
flex: 1,
width: 25
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
labelWidth: 139,
items: [
{
xtype: 'container',
layout: 'hbox',
fieldLabel: 'Keywords',
items: [
{
xtype: 'textfield',
vtype: 'metatag-keywords',
width: 277,
maxLength: 256,
maxLengthText: '{t:form-field-maxlength}'
},
{
xtype: 'spacer',
width: 5
},
{
xtype: 'button',
flex: 1,
iconCls: 'mcp-icon-information',
width: 25,
tooltip: '{t:structure-keywords}'
}
]
},
{
xtype: 'container',
layout: 'hbox',
fieldLabel: 'Description',
items: [
{
xtype: 'textarea',
maxLength: 156,
maxLengthText: '{t:form-field-maxlength}',
width: 277
},
{
xtype: 'spacer',
flex: 1,
width: 5
},
{
xtype: 'button',
flex: 1,
width: 25,
iconCls: 'mcp-icon-information',
tooltip: '{t:structure-description}'
}
]
},
{
xtype: 'container',
fieldLabel: '{t:search-engine-tracking}',
items: [
{
xtype: 'combo',
store: 'storeRobots',
mode: 'local',
triggerAction: 'all',
editable: false,
displayField: 'value',
hiddenName: 'robots',
hiddenValue: 'all',
valueField: 'value',
value: '{t:optimal}',
resizable: true,
width: 278
}
]
}
]
}
]
}
]
}
];
MyPanel1Ui.superclass.initComponent.call(this);
}
});



Now the problem is that when the fieldset is being expandend, the panel gets a vertical scrollbar.



{
xtype: 'fieldset',
title: '{t:advanced-settings}',
layout: 'auto',
collapsed: true,
collapsible: true,



But some fields will also get a horizontal scrollbar and that's not what i want to happen :-)

For example, this field:



xtype: 'textfield',
allowBlank: false,
blankText: '{t:form-field-required}',
name: 'name',
enableKeyEvents: true,
fieldLabel: '{t:title}',
anchor: '100%',
ref: '../structureTitleField'


is getting a horizontal scrollbar.

By the way this is happening in FF 4

Some help would be appreciated

Thnx