PDA

View Full Version : Form panel design problems with 3.3.1 and IE



filippo.ferrari
15 Dec 2010, 1:43 AM
I've just updated my app designed with Designer for using it with ext 3.3.1.

I've a complex layout in my form panel with differents fieldsets and containers to render fieldsets on different columns.

Basically my code have this structure:




MyUIClass = Ext.extend(Ext.Panel, {
title: '',
height: 530,
layout: 'border',
frame: false,
initComponent: function() {
this.items = [
{
xtype: 'form',
region: 'north',
width: 100,
title: '',
height: 380,
items: [
{
xtype: 'fieldset',
title: 'FieldSet Title',
labelAlign: 'left',
items: [
{
xtype: 'container',
layout: 'hbox',
anchor: '100%',
height: 25,
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
height: 20,
items: [
{
xtype: 'combo',
...
}
]
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
..........
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form',
items: [
{
xtype: 'combo',
....
}
]
}
]
},
{
xtype: 'container',
height: 25,
layout: 'hbox',
anchor: '100%',
id: 'ct-datichiamanteline2',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form',
items: [
{
xtype: 'combo',
.....
}
]
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
......
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form',
items: [
{
xtype: 'textfield',
..................
}
]
}
]
},
{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
height: 25,
id: 'ct-dtchiamanteline3',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'combo',
...........
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form'
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
..............
}
]
}
]
},
......... and many more

This conf works fine in every browser (IE8, Chrome, Safari, FF for Win ) and in designer design and preview with ext 3.2.1, with 3.3.1 and IE8 the layout is broken (with others browsers is ok).


[23832

23836

jarrednicholls
15 Dec 2010, 7:37 AM
Hi filippo,

That is strange indeed. I'll move this to the Ext: Bugs forum. Thanks!

Condor
19 Dec 2010, 11:08 PM
In IE when the field is a too wide (just 1px is enough) it will be pushed to the next line.

1. Your fieldset needs an 'anchor' too.
2. You didn't post the config for any of your fields, but they will also need an 'anchor'.

filippo.ferrari
22 Dec 2010, 3:17 PM
I've controlled every part of my form panel and now I have every fieldset and every fields with an anchor... but that dosen't solve...


I've removed others components and stores from my project and this one is the panel:



PannelloChiamataUi = Ext.extend(Ext.Panel, {
title: 'Nuova Chiamata',
height: 530,
layout: 'border',
frame: false,
iconCls: 'tab-nuova',
initComponent: function() {
this.items = [
{
xtype: 'form',
region: 'north',
width: 100,
title: '',
height: 380,
frame: false,
padding: 5,
headerAsText: false,
labelWidth: '',
ref: 'formNuovaChiamata',
id: 'form-nuovachiamata',
items: [
{
xtype: 'fieldset',
title: 'Dati Chiamante',
labelAlign: 'left',
anchor: '100%',
items: [
{
xtype: 'container',
layout: 'hbox',
anchor: '100%',
height: 25,
id: 'ct-dtchiamanteline1',
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
height: 20,
items: [
{
xtype: 'combo',
fieldLabel: 'Chiamante',
tabIndex: 1,
allowBlank: false,
emptyText: 'Cerca Chiamante...',
selectOnFocus: true,
maxLength: 50,
minLength: 3,
loadingText: 'Ricerca in corso...',
triggerAction: 'all',
tpl: '<tpl for="."><div class="combo-result-item"><div class="combo-name {stato}">{chiamante}</div><div class="combo-details">CDC: {cdc}</div><div class="combo-details">Sede: {sede}</div><div class="combo-details">Tel: {numeri}</div><div class="combo-details">Mail: {mail}</div></div></tpl>',
itemSelector: 'div.combo-result-item',
valueField: 'chiamante',
blankText: 'Il Chiamante Obbligatorio',
enableKeyEvents: true,
hideTrigger: true,
anchor: '95%',
displayField: 'chiamante',
lazyRender: true,
maskRe: '',
ref: '../../../../editorRicercachiamante',
id: 'chiamante'
}
]
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Atro Tel / Fax',
anchor: '100%',
ref: '../../../../editorAltrotel',
id: 'data-atrotel'
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form',
items: [
{
xtype: 'combo',
fieldLabel: 'Inventario',
selectOnFocus: true,
tabIndex: 3,
emptyText: 'Cerca Inventario...',
hideTrigger: true,
tpl: '<tpl for="."><div class="combo-result-item"><div class="combo-inv"> {inventario}</div><div class="combo-details">{descr_dispositivo} {marca} {modello}</div><div class="combo-details">Matr: {matricola}</div><div class="combo-details">Hostname: {hostname}</div><div class="combo-details">Cdc: {centro_costo}</div><div class="combo-details">Sede: {sede}</div></div></tpl>',
displayField: 'inventario',
itemSelector: 'div.combo-result-item',
valueField: 'inventario',
anchor: '100%',
autoSelect: false,
lazyRender: true,
loadingText: 'Ricerca nell\'inventario...',
enableKeyEvents: true,
maskRe: '',
ref: '../../../../editorInventario',
id: 'inventario'
}
]
}
]
},
{
xtype: 'container',
height: 25,
layout: 'hbox',
anchor: '100%',
id: 'ct-datichiamanteline2',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form',
items: [
{
xtype: 'combo',
emptyText: 'Cerca CDC...',
selectOnFocus: true,
allowBlank: false,
fieldLabel: 'CDC',
maxLength: 50,
minLength: 3,
displayField: 'descrizione',
tpl: '<tpl for="."><div class="combo-result-item"><div class="combo-cdc"> {descrizione}</div><div class="combo-details">Codice: {id}</div></div></tpl>',
itemSelector: 'div.combo-result-item',
loadingText: 'Ricerca cdc in corso...',
hideTrigger: true,
valueField: 'descrizione',
triggerAction: 'all',
blankText: 'Il Campo CDC Ŕ obbligatorio ',
anchor: '95%',
enableKeyEvents: true,
maskRe: '',
ref: '../../../../editorCdc',
id: 'cdc'
}
]
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Mail',
anchor: '100%',
ref: '../../../../editorMail',
id: 'data-mail'
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'IP',
anchor: '100%',
ref: '../../../../editorIp',
id: 'data-ip'
}
]
}
]
},
{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
height: 25,
id: 'ct-dtchiamanteline3',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'combo',
fieldLabel: 'Sede',
allowBlank: false,
emptyText: 'Cerca Sede...',
mode: 'remote',
maxLength: 50,
minLength: 3,
hideTrigger: true,
loadingText: 'Ricerca Sede...',
displayField: 'disp',
tpl: '<tpl for="."><div class="combo-result-item"><div class="combo-sede">{sede}</div><div class="combo-details">{dett}</div></div></tpl>',
itemSelector: 'div.combo-result-item',
blankText: 'Il campo sede Ŕ obbligatorio',
anchor: '95%',
enableKeyEvents: true,
maskRe: '',
ref: '../../../../editorSede',
id: 'sede'
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 20 0 0',
layout: 'form'
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Nome Host',
anchor: '100%',
ref: '../../../../editorNomehost',
id: 'data-nomehost'
}
]
}
]
},
{
xtype: 'container',
height: 25,
layout: 'hbox',
anchor: '100%',
id: 'ct-datichaiamanteline4',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Telefoni',
allowBlank: false,
emptyText: '',
anchor: '95%',
hidden: false,
tabIndex: 2,
blankText: 'Il campo telefoni Ŕ obbligatorio',
ref: '../../../../editorTelefoni',
id: 'data-telefoni'
}
]
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0'
},
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0'
}
]
}
]
},
{
xtype: 'container',
layout: 'hbox',
anchor: '100%',
height: 230,
id: 'ct-dchiamata-ass',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
margins: '0 20 0 0',
id: 'ct-dtchiamata',
items: [
{
xtype: 'fieldset',
title: 'Dati Chiamata',
anchor: '100%',
id: 'fs-dtchaimata',
items: [
{
xtype: 'container',
height: 50,
layout: 'form',
labelAlign: 'top',
hideBorders: true,
id: 'ct-datichline1',
items: [
{
xtype: 'combo',
fieldLabel: 'Oggetto',
anchor: '100%',
tabIndex: 4,
emptyText: 'Cerca Oggetto Problema...',
tpl: '<tpl for="."><div class="combo-result-item"><div>{descrizione}</div><div class="combo-details">{descrizione_estesa}</div></div></tpl>',
loadingText: 'Ricerca Problema...',
displayField: 'descrizione',
minLength: 3,
maxLength: 100,
valueField: 'descrizione',
itemSelector: 'div.combo-result-item',
hideTrigger: true,
allowBlank: false,
blankText: 'Il Campo Oggetto obbligatorio',
minListWidth: 120,
lazyRender: true,
autoSelect: false,
selectOnFocus: true,
ref: '../../../../../editorOggettoProblema',
id: 'oggettoproblema'
}
]
},
{
xtype: 'container',
layout: 'hbox',
anchor: '100%',
height: 32,
id: 'ct-datichline2',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
flex: 1,
margins: '0 10 0 0',
layout: 'form',
items: [
{
xtype: 'checkbox',
boxLabel: 'ReperibilitÓ',
tabIndex: 5,
hideLabel: true,
ref: '../../../../../../chekReperibilita',
id: 'reperibilita'
}
]
},
{
xtype: 'container',
flex: 1,
margins: '0 10 0 0',
layout: 'form',
items: [
{
xtype: 'checkbox',
boxLabel: 'Urgenza',
tabIndex: 6,
hideLabel: true,
ref: '../../../../../../chekUrgenza',
id: 'urgenza'
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
labelAlign: 'left',
labelWidth: 1,
id: 'ct-datichline3',
items: [
{
xtype: 'textarea',
fieldLabel: '',
disabled: false,
hideLabel: true,
tabIndex: 7,
anchor: '100%',
ref: '../../../../../editorDettaglioProblema',
id: 'problema'
}
]
}
]
}
]
},
{
xtype: 'container',
flex: 1,
margins: '',
ref: '../../containerAssegnazioni',
id: 'ct-assegnaz',
items: [
{
xtype: 'fieldset',
title: 'Assegnazione',
ref: '../../../ctAssegnazione',
id: 'fs-assegn',
items: [
{
xtype: 'container',
height: 60,
layout: 'form',
labelWidth: 40,
items: [
{
xtype: 'combo',
fieldLabel: 'A',
anchor: '80%',
hideTrigger: true,
tabIndex: 8,
tpl: [
'<tpl for="."><div class="combo-result-item"><div>{denominazione}</div><div class="combo-details">Tel: {telefono}</div><div class="combo-details">Mail: {mail}</div></div></tpl>'
],
itemSelector: 'div.combo-result-item',
selectOnFocus: true,
width: 180,
ref: '../../../../../editorRicercaAssA',
id: 'assegnazionea'
},
{
xtype: 'tabpanel',
activeTab: 0,
hideBorders: true,
hideCollapseTool: true,
enableTabScroll: true,
bodyStyle: '{line-height: 0; height:0; margin:0}',
ref: '../../../../../pannelloA',
id: 'panel-ass-a'
}
]
},
{
xtype: 'container',
layout: 'form',
labelWidth: 40,
items: [
{
xtype: 'combo',
fieldLabel: 'CC',
anchor: '80%',
hideTrigger: true,
itemSelector: 'div.combo-result-item',
tpl: '<tpl for="."><div class="combo-result-item"><div>{denominazione}</div><div class="combo-details">Tel: {telefono}</div><div class="combo-details">Mail: {mail}</div></div></tpl>',
selectOnFocus: true,
tabIndex: 9,
width: 180,
ref: '../../../../../editorRicercaAssCC',
id: 'assegnazionecc'
},
{
xtype: 'tabpanel',
activeTab: 0,
hideBorders: true,
animCollapse: false,
collapseFirst: false,
enableTabScroll: true,
height: 0,
ref: '../../../../../pannelloCC',
id: 'panel-ass-cc'
}
]
}
]
},
{
xtype: 'container',
layout: 'column',
autoWidth: true,
ref: '../../../ctPulsanti',
items: [
{
xtype: 'button',
text: 'Salva e Chiudi',
iconAlign: 'top',
scale: 'large',
iconCls: 'salvachiudi',
width: 80,
tabIndex: 10,
tooltip: 'Salva e chiude la chiamata Ŕ necessario confermare.',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Conferma',
ref: '../../../../../../bottoneSalvaChiudi',
id: 'conferma-salvataggio'
}
]
}
},
{
xtype: 'button',
text: 'Salva',
iconAlign: 'top',
iconCls: 'salva',
scale: 'large',
width: 80,
tabIndex: 11,
ref: '../../../../btSalva'
},
{
xtype: 'button',
text: 'Svuota',
iconAlign: 'top',
iconCls: 'reset',
scale: 'large',
width: 80,
tabIndex: 12,
ref: '../../../../btSvuota'
},
{
xtype: 'button',
text: 'Gestione Data',
iconAlign: 'top',
scale: 'large',
iconCls: 'gestionedata',
width: 80,
tabIndex: 13,
tooltip: 'Gestisce l\'apertura della chiamata in data e orario diversi dal corrente.',
ref: '../../../../btGestioneData',
id: 'bt-gestione-data'
},
{
xtype: 'container',
id: 'box-dataora'
}
]
}
]
}
]
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'center'
}
];
PannelloChiamataUi.superclass.initComponent.call(this);
}
});

It's a little complicated but with Designer (and firefox, chrome etc.) it works correctly...

Condor
22 Dec 2010, 11:18 PM
1. Which mode is IE8 in? Quirks, strict or compatibility mode? That last one (compatibility mode) isn't supported by Ext.

2. Maybe you need to change the anchors of your textfields to anchor:'-3' (or some other small number).

filippo.ferrari
23 Dec 2010, 2:00 AM
I've tested with compatibility mode on and off ...then I've setup every fields to -3 anchor... doesn't works...

if I move my project in a 3.2.1 enviroment works correctly :-?

filippo.ferrari
23 Dec 2010, 2:14 AM
I've make a new test in a 3.3.1 enviroment I've copied step by step the resource folder from 3.2.1 (to test if something concerning CSS) then the adapter folder and then ext-all-debug.js only when I update the ext-all-debug.js my form panel works correctly in IE8.

Probably is a sequence of nested container with layouts that 3.3.1 render in a not compatible way with IE8....

filippo.ferrari
24 Dec 2010, 4:53 AM
Solved to setup for every element that is a container an height!