Problèmes EXTJS 2.2 vers EXTJS 3.0

Version imprimable

17/07/2009, 11h59
Mairym13

Problèmes EXTJS 2.2 vers EXTJS 3.0

Bonjour,
Je migre en ce moment un projet utilisant EXTJS 2.2 vers EXTJS 3.0. Le changement s'est en gros bien passé, mais je me retrouve avec trois problèmes d'affichage. Le deux plus importants sont expliqués ci-dessous.

Mes boutons (texte), à l'origine gris, n'apparaissent plus. Seul le texte est encore visible. On peut cliquer dessus et le bouton fonctionne, mais j'aimerais retrouver le fond et contour.

Ma pagingtoolbar est compressée! Les boutons (flèches) sont rognés comme si ils n'avaient pas assez de place alors qu'il y a plein de place. :?

Merci d'avance!
17/07/2009, 12h55
bigben89

Au premier abord, je verrais 2 possibilités :
- soit tu as mis à jour les fichiers javascript, mais en oubliant de mettre à jour les css (quand tu utilises le javascript d'une version avec le css d'une autre version, tu peux être sûr que ça va merder)
- soit tu utilises un thème perso prévu au départ pour la version 2, mais pas compatible non plus avec la version 3 (comme le thème "Slate", vraiment superbe, mais aux dernières nouvelles pas encore compatible avec Ext3)
17/07/2009, 13h53
Mairym13

Merci beaucoup BigBen89 pour la rapidité de ta réponse.

Je n'utilise pas de thème perso pour les boutons, seulement le basic (bouton gris tout bête)

J'ai bien mis à jour les fichiers css dans mon projet. La seule différence notable est que dans la version précédente, je possédais des fichiers directement dans le répertoire "css", tandis que dans la version 3.0, les fichiers sont rangés dans deux sous-répertoires : "structure" et "visual". J'aurais bien tout collé directement dans "css" mais les deux dossiers possèdent des fichiers ayant le même nom (mais n'étant pas identiques).

De plus, lors de l'installation de 3.0, j'avais tout d'abord collé tous les répertoires à leur emplacement, mais mon application "buggant" par la suite (beaucoup plus que maintenant), j'ai recommencé en conservant cette fois les liens ".svn" dans les dossiers. Est-ce que l'erreur pourrait venir de la?
17/07/2009, 14h00
Mairym13

J'ai essayé de mettre le fichier "button.css" de "visual" ou de "structure" directement dans le dossier "css", mais pas de résultat non plus. J'ai aussi supprimé le lien .svn du fichier '"css" mais rien n'a changé.
17/07/2009, 14h12
bigben89

Ca ne sert généralement à rien d'inclure le fichier buttons.css, ext-all.css comprenant tous les styles nécessaires.
Il y aurait moyen de voir le code qui pose problème ?

Je crée ici une toolbar (en bas d'un gridPanel).
La toolbar possède également un numberfiel et un bouton afin de choisir le nombre de résultats à afficher par page.
On voit ici les deux problèmes : la compression de la toolbar et l'absence de cadre et de fond pour le bouton (valider)
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 bbar :new Ext.PagingToolbar( { pageSize :Number(nombreRessourceParPage), store :localListeObjRessource, displayInfo :true, items : [ '-', lang.nombreParPage,{ id :'nbPageRessource', xtype :'numberfield', monitorResize :true, width :30, Height :10, listeners : { specialkey : function(field, evenement) { if (Number(evenement.getKey()) == Number(evenement.ENTER)) { modifierNbRessAfficher(); } } } }, { xtype :'button', text :lang.page_cmd_valider, handler : function() { modifierNbRessAfficher(); } } ] } )
Quand je regarde ma console d'erreur à l'affichage de mon projet, je n'ai pas d'erreurs mais des warning concernant ext-all.css :

propriété "zoom" inconnue
propriété "text-overflow" inconnue
propriété "white-space" inconnue

erreur d'analyse de la valeur pour la propriété "filter". déclaration abandonnée

J'ai trouvé très intéressant le lien :
http://extjs.com/forum/showthread.php?t=70352
Mais je ne sais pas si ça aide vraiment pour mon problème..

De plus, sous internet explorer, le problème de toolbar disparaît (je suis sous firefox en général). Il ne reste que le problème d'affichage des boutons et mon troisième problème. Celui-là j'ai un peu plus de mal à l'expliquer et je n'ai pas trouvé le nom du composant en cause (je prend la relève d'une personne sur un code que je ne connais pas encore trop), c'est pourquoi je ne l'avais pas mis au début. Mais cela peut peut-être t'aider:

J'ai des sous- catégories (en cases à cocher), groupées dans des catégories que je peux développer ou non en cliquant dessus. A l'origine, j'avais un petit + vert devant une catégorie que je pouvais développer et un - vert si elle était déjà développée. L'écriture de la catégorie était en bleu.
Maintenant, je n'ai plus ni + ni - et l'écriture est en noir....

En retournant sur le site de EXT js, je pense que mon troisième problème porte sur un column tree
De plus, à regarder de plus près internet explorer, j'ai des combo box et des box avec choix de date (petit calendrier au bout du champ de texte) qui ne fonctionnent pas non plus. Internet explorer est donc pire que firefox

Dans la liste des bugs à rajouter à la liste, je viens de voir également (sous firefox et internet exxplorer) que trois de mes cases à cocher ne fonctionnent pas (seul apparait le label text et l'image). Mes autres cases à cocher (celles du column tree) fonctionnent correctement...8O

Bonjour,

Après plusieurs essais, je me demande si le problème ne pourrait pas venir de ma css. J'ai l'impression qu'elle n'est pas prise en compte, ou que ses informations passent au second plan (j'ai utilisé firebug/dom inspector pour débugger le code html). Qu'en penses-tu?

J'essaie de rajouter des options dans mon code, du genre background color, ou encore en utilisant cls, mais rien ne change....

avec firebug, j'obtiens ceci sur mon bouton :

html:
<button id="ext-gen178" class="x-btn-text" type="button">Valider</button>

or, j'ai rajouté id='boutonVal' dans mon code, mais ca n'a pas changé l'identifiant 'ext-gen178'.

style:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
ext-gecko .x-btn button {
padding-left:0;
padding-right:0;
}
ext-all.css (ligne 1413)
.x-btn button {
-x-system-font:none;
color:#333333;
font-family:arial,tahoma,verdana,helvetica;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
ext-all.css (ligne 5642)
.x-btn button {
background:transparent none repeat scroll 0 0;
border:0 none;
cursor:pointer;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
overflow:visible;
padding-left:3px;
padding-right:3px;
width:auto;
}
ext-all.css (ligne 1396)
.x-btn-text {
cursor:pointer;
padding:0;
white-space:nowrap;
}
ext-all.css (ligne 1430)
Hérité deem
.x-btn em {
font-style:normal;
font-weight:normal;
}
ext-all.css (ligne 5647)
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ext-all.css (ligne 7)
Hérité detd.x-btn-center
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
font-family:arial,tahoma,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
ext-all.css (ligne 5731)
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
white-space:nowrap;
}
ext-all.css (ligne 2099)
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
white-space:nowrap;
}
ext-all.css (ligne 1847)
Hérité detable#ext-comp-1148.x-btn-wrap
.x-btn {
font-family:tahoma,verdana,helvetica;
font-size:11px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
ext-all.css (ligne 5638)
.x-btn {
cursor:pointer;
white-space:nowrap;
}
ext-all.css (ligne 1391)
Hérité detd#ext-gen176
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
font-family:arial,tahoma,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
ext-all.css (ligne 5731)
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
white-space:nowrap;
}
ext-all.css (ligne 2099)
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
white-space:nowrap;
}
ext-all.css (ligne 1847)
Hérité dediv#ext-comp-1022.x-toolbar
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar {
border-style:solid;
}
ext-all.css (ligne 4758)
.x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar {
border-style:none solid solid;
}
ext-all.css (ligne 3879)
.x-toolbar {
border-style:solid;
}
ext-all.css (ligne 2076)
.x-toolbar {
border-style:solid;
}
ext-all.css (ligne 1824)
Hérité dediv#gridRessource.x-panel
.x-panel {
border-style:solid;
}
ext-all.css (ligne 3858)
Hérité dediv#ext-gen136.x-panel-body
.x-panel-body {
border-style:none solid solid;
}
ext-all.css (ligne 3872)
Hérité dediv#ext-comp-1130.x-panel
.x-panel {
border-style:solid;
}
ext-all.css (ligne 3858)
Hérité dediv#ext-gen126.x-panel-body
.x-panel-body {
border-style:none solid solid;
}
ext-all.css (ligne 3872)
Hérité dediv#ONGLET_RESSOURCES.x-panel
.x-panel {
border-style:solid;
}
ext-all.css (ligne 3858)
Hérité dediv#ext-gen114.x-panel-body
.x-panel-body {
border-style:none solid solid;
}
ext-all.css (ligne 3872)
Hérité dediv#ext-comp-1142.x-panel
.x-panel {
border-style:solid;
}
ext-all.css (ligne 3858)
Hérité dediv#ext-gen112.x-panel-body
.x-panel-body {
border-style:none solid solid;
}
ext-all.css (ligne 3872)
Hérité dediv#panSudContent.x-panel
.x-panel {
border-style:solid;
}
ext-all.css (ligne 3858)
Hérité dediv#ext-gen89.x-panel-body
.x-panel-body {
border-style:none solid solid;
}
ext-all.css (ligne 3872)
Hérité dediv#regionSud.x-panel
.x-panel {
border-style:solid;
}
ext-all.css (ligne 3858)
Hérité debody#ext-gen11.ext-gecko
body {
color:#000000;
font-family:Arial,sans-serif;
font-size:12px;
}

Je n'arrive pas à comprendre cette histoire d'héritage et comment changer cela!

J'ai essayé dans mon code de mettre : cls:'button'

ou encore background-color :'#DFE8F6', border : true

ou bien encore bodyStyle :'background-color:#DFE8F6',
border :true

je ne vois plus trop quoi faire...
*

--------------------------------------

J'ai finalement trouvé la réponse à mon pb : je travaille avec seam et mon fichier ext-seam-all.js n'était pas correct.

Merci BigBen89