PDA

View Full Version : fields alignement issue



xavxav
18 Jan 2011, 7:17 AM
Hi

I created a form with several fields aligned in columns. On the local development server, the date fields are aligned with the labels. But on the qualification server, the date fields are not aligned vertically. I do not understand why there is such a difference because the code is exactly the same. Here is the code :


Ext.edi.imad.administration.composants.traitement.Form = function(config, urlListe, idResultGrid) {
var me = this;
this.idResultGrid = idResultGrid;
this.urlListe = urlListe;

Ext.applyIf(config, {
title: getLabel('administration.composants.grille.traitement.recherche.title'),
layout:'column',
region:'north',
height:160,
border: false,
tbar: [{
text: getLabel('common.btn.rechercher'),
iconCls: 'silk-search',
handler: this.onValidateSearch,
scope: this
},{
text: getLabel('common.btn.reinitialiser'),
iconCls: 'silk-undo',
handler: this.onReinitialiseRecherche,
scope: this
}],
items:[{
xtype:"fieldset",
title:"",
autoHeight:true,
width:300,
layout:"form",
border:false,
padding:5,
style:"border-style:none",
margins:{top:10,right:0,bottom:10,left:10},
items:[{
xtype:"combo",
fieldLabel:getLabel('administration.composants.recherche.traitement.field.partenaire'),
name:"recherchePartenaireTraitement",
id:"recherchePartenaireTraitement",
displayField:'nom',
valueField:'id',
triggerAction: 'all',
defaultValue:' ',
mode:'local',
tpl: '<tpl for="."><div class="x-combo-list-item">{nom:defaultValue(" ")}</div></tpl>',
store:new Ext.data.JsonStore({
method: 'GET',
autoLoad: true,
url: getUrl('partenaireCooperativeListe'),
// reader configs
root: 'result',
idProperty: 'id',
fields: ['id', 'nom'],
listeners:{
load: function(store, record, e){
var ligneVide = new Ext.data.Record({id:"", nom:""});
var lignesVides = new Array();
lignesVides.push(ligneVide);
store.insert(0,lignesVides);
}
}
}),
editable:false
}]
},{
xtype:"fieldset",
title:"",
autoHeight:true,
width:260,
labelWidth:110,
padding:5,
border:false,
margins:{top:10,bottom:10},
//style:"border-style:none",
items:[{
xtype:"datefield",
fieldLabel:getLabel('administration.composants.recherche.traitement.field.import.debut'),
name:"rechercheDebutImport",
id:"rechercheDebutImport"
},{
xtype:"datefield",
fieldLabel:getLabel('administration.composants.recherche.traitement.field.import.fin'),
name:"rechercheFinImport",
id:"rechercheFinImport"
}]
},{
xtype:"fieldset",
title:"",
autoHeight:true,
width:260,
labelWidth:130,
padding:5,
border:false,
margins:{top:10,bottom:10},
style:"border-style:none",
items:[{
xtype:"datefield",
fieldLabel:getLabel('administration.composants.recherche.traitement.field.validation.debut'),
name:"rechercheDebutValidation",
id:"rechercheDebutValidation"
},{
xtype:"datefield",
fieldLabel:getLabel('administration.composants.recherche.traitement.field.validation.fin'),
name:"rechercheFinValidation",
id:"rechercheFinValidation"
}]
}]
});
Ext.edi.imad.administration.composants.traitement.Form.superclass.constructor.call(this, config);

};
Ext.extend(Ext.edi.imad.administration.composants.traitement.Form, Ext.form.FormPanel, {});
Can anybody help me because I am really embarassed by this issue.
Here is a screeshot on the development computer:
24338
Here is a screeshot on the qualification server
24339.
I have already spend a lot of time to find a solution. I would realy appreciate a help !
Best Regards
Xavier

Condor
18 Jan 2011, 7:30 AM
You need to make your fieldsets a few pixels wider.

xavxav
18 Jan 2011, 8:14 AM
It works ! Thanks a lot Condor !
And for the top margin which is added ?


<div id="header">
<div class="api-title-admin"><a href="/imad/web/administration/deconnexion">Déconnexion</a></div>
</div>

<script type="text/javascript" language="javascript">
Ext.BLANK_IMAGE_URL = getUrl('imageDefaut');

Ext.onReady(function() {


Ext.QuickTips.init();

var viewport = new Ext.Viewport({
layout: 'border',
frame: true,
items: [{
region: 'north',
autoHeight: true,
el: 'header',
border: false,
margins: '0 0 5 0'
}, {
region: 'center',
xtype: 'tabpanel',
margins: '0 5 5 0',
border: true,
id: 'pagePrincipale'
}]
});


viewport.doLayout();
});

</script>
Have you got an idea ?

Condor
18 Jan 2011, 8:33 AM
Can't see from the screenshot. Can you inspect it in your browser to see which element is causing this?

xavxav
18 Jan 2011, 9:10 AM
I found the solution for the top margin.
I added a xtype:'box' in the region north and I replaced the autoHeight by a height parameter.
Thanks a lot for your help Condor.
I still find strange behaviors but I will post a new topic because it is not directly linked.