Discussion :

[Mairym13]

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!

[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)

[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?

[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é.

[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 ?

[Mairym13]

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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...