PDA

View Full Version : Combo box and date picker button alignment issue with Internet Explorer 8.



xavxav
19 Jan 2011, 1:30 AM
Hi!
I have a display issue when there is a form with date picker or combo box. The button is one pixel down the field.

The most surprising is that the alignment issue occures in the qualification server and not in my local development environment, although there is not any code differences. The problems occurs with Internet Explorer only >:)

You can see the differences in those two screen shots. In the first, there is what I see on my develoment PC. the second is what I see in my qualification server.

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:270,
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, {
onValidateSearch: function() {
var partenaire = Ext.getCmp('recherchePartenaireTraitement').getValue();
var debutDateImport = "";
if(Ext.getCmp('rechercheDebutImport').getValue()) {
debutDateImport = Ext.getCmp('rechercheDebutImport').getValue().format('d/m/Y');
}
var finDateImport = "";
if(Ext.getCmp('rechercheFinImport').getValue()) {
finDateImport = Ext.getCmp('rechercheFinImport').getValue().format('d/m/Y');
}
var debutDateValidation = "";
if(Ext.getCmp('rechercheDebutValidation').getValue()) {
debutDateValidation = Ext.getCmp('rechercheDebutValidation').getValue().format('d/m/Y');
}
var finDateValidation = "";
if(Ext.getCmp('rechercheFinValidation').getValue()) {
finDateValidation = Ext.getCmp('rechercheFinValidation').getValue().format('d/m/Y');
}
var grilleTraitement = Ext.getCmp(this.idResultGrid);
grilleTraitement.resetAncienneColonne();
grilleTraitement.getStore().proxy.setUrl(this.urlListe);
grilleTraitement.getStore().load({params: {
'partenaire':partenaire,
'debutDateImport':debutDateImport,
'finDateImport':finDateImport,
'debutDateValidation':debutDateValidation,
'finDateValidation':finDateValidation
},
callback: function(response, opts, success){
if(response) {
var obj = Ext.util.JSON.decode(response.responseText);
if (!success){
showError(obj.error);
}
}
}});
grilleTraitement.setAncienParam({'partenaire': partenaire,
'debutDateImport':debutDateImport,
'finDateImport':finDateImport,
'debutDateValidation':debutDateValidation,
'finDateValidation':finDateValidation});
},
onReinitialiseRecherche:function() {
var grille = Ext.getCmp(this.idResultGrid);
grille.ancienParam=null;
grille.jStore.load({params: null});
Ext.getCmp('recherchePartenaireTraitement').reset();
Ext.getCmp('recherchePartenaireTraitement').setValue(null);
Ext.getCmp('rechercheDebutImport').setValue(null);
Ext.getCmp('rechercheFinImport').setValue(null);
Ext.getCmp('rechercheDebutValidation').setValue(null);
}
});

Condor
19 Jan 2011, 2:30 AM
Look in the Bugs section. It only needs a small css correctly.

xavxav
19 Jan 2011, 5:23 AM
Could you write me where can I find the topic in the bug section (eg : an url would be helpful)?

xavxav
21 Jan 2011, 12:50 AM
Hi
Sorry, but I have been looking for the solution in the bugs section for hours and I did not find any solution. Could you please tell me more information to help me to find the topic (date, author, or the URL of the topic).
I would really appreciate.
Best Regards,
Xavier

valititi
21 Jan 2011, 10:13 PM
I had similar to your problem and I solved by using my own styles :


{ fieldLabel:'Date', id:'task_date', format:'d F Y',
xtype:'datefield', labelStyle:fLblSty,width:130,cls:'fNrmDat',editable:false,allowBlank:false},
where
fLblSty = 'font-size:11px;padding:3 0 0 2;text-align:right;color:#444488'; // in javascript...
// anyway, you can put it into a css file...

and fNrmDat is an css file like this :
.fNrmDat{font-size:11px;height:19px;padding:2 2 2 2;}
Play with this values... I made just a copy-paste from mine... For me that's solves the problem... I hope for you too.

Vinni
6 Mar 2011, 10:51 PM
Look in the Bugs section. It only needs a small css correctly.

Condor,

It would be great if you could let us know what correction is needed in CSS?
We coulnt able to find the solution. I already spent couple of hours in Bugs section.. but of no use.

Thanks for the help in advance.

Regards,
Vinni