extjs4 bug d'affichage au chargement ie7

[hadesjack]

Bonjour,
rien de dramatique au niveaux javascript mais j'ai des soucis d'affichage au chargement, j'avais eu pareil quand j'ai testé de passer à extjs 3 il y a quelque temps.


donc je viens d'un migration de extjs2 vers le 4 mais je ne suis pas sur qu'il y ai un rapport avec mon soucis.

Le hic c'est que j'ai des éléments mal positionner au chargement, car quand on passe la souris dessus pour les select et les boutons ou qu'on clique dedans pour les textfield tous ce repositionne comme il le faut et il ne bouge plus pendant le reste du temps qu'on passe sur la page mais si je recharge j'ai de nouveaux le bug. je dirais qu'ils sont pour la plupart décalé de 5px vers le bas.

voici un exemple de la manière dont je cré mes éléments

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Objets de type text
	elements = null;
	elements = Ext.select("input[type=text]");
    for (var i=0; i<elements.getCount(); i++)
    {
        var input =	elements.item(i);
        var options = this.getOption(input);
		/*var attribut = input.dom.attributes;
		for (var j=0; j<attribut.length-1; j++)
		{
			if(attribut[j].name != "fast:options")
			{
				options[attribut[j].name] = attribut[j].value;
			}
		}*/
		var ereg = this.eregs[options.type];
		if (ereg) Ext.apply(options, {regex: ereg})
		if (input.dom.onkeyup) {
			options.fn1 = input.dom.onkeyup;
		} else {
			options.fn1 = Ext.emptyFn;
		};
		if (input.dom.onblur) {
			options.fn2 = input.dom.onblur;
		} else {
			options.fn2 = Ext.emptyFn;
		};
		if (input.dom.onfocus) {
			options.fn3 = input.dom.onfocus;
		} else {
			options.fn3 = Ext.emptyFn;
		};
		Ext.apply(options, {
			listeners: {
				keyup: function (scope, e) {
					scope.fn1();
				},
				blur: function (scope, e) {
					scope.fn2();
				},
				focus: function (scope, e) {
					scope.fn3();
				}
			},
			renderTo: input.parent()
		});
		Ext.apply(options, {
			renderTo: input.parent()
		});
		var field;
		field = new Ext.form.TextField(options);
		input.remove();
	}

on transforme du html à la volé pour en faire du extjs.

a noté que je n'ai aucun bug sous firefox 3 et 8.


et j'ai un autre bug d'affichage dans le css ext.all.css on a cette ligne

Code :

table{border-collapse:collapse;border-spacing:0}

j'ai voulu mètre à la place

Code :

table{border-collapse:separate;border-spacing:1}

en sur-définissant dans un autre css.
j'ai bien mon rendu qui est la séparations visuel des cellules d'un tableau mais la encore ie7 me génère un bug en me mettant une sorte de bordure de 1px tout autour d'un bouton.

On peut voir sur l'image le bug des boutons et j'ai cliquer dans la cellule nom de client pour le ré-aligner et par exemple un simple survole des boutons ou d'un select va les remettre à leur place voir la photos sous firefox


Merci.