[GXT] Tree, Leaf et Style CSS

**OrigineDeLaVie** · 08/11/2013, 15h32

Bonjour,

Le lien suivant est un exemple de Tree GXT : http://www.sencha.com/examples/#ExamplePlace:basictree

Je voudrais pouvoir afficher le texte d'une feuille en gras ou en Bleu, Vert,...etc, afin de la distinguer rapidement (visuellement) des autres.

par exemple la 1ère de l'arbo. Beethoven>Quartets :"Six String Quartets" dans l'exemple ci-dessus.

D'avance, Merci

**OrigineDeLaVie** · 08/11/2013, 16h28

On peut Overrider la méthode renderChild du tree

Code :

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
 
 
interface ProfiledCellTemplates extends XTemplates {
		@XTemplate("<div style=\"background-color:{rgbColor};\">{data}</div>")
		public SafeHtml colorComponent(SafeHtml data, String rgbColor);
	}
 
 
 
final Tree<MyTypeNode , String> tree =
			new Tree<MyTypeNode , String>(store, valueProvider) {
 
@Override
				protected SafeHtml renderChild(MyTypeNode parent, MyTypeNode child, int depth, TreeViewRenderMode renderMode) {
					ProfiledCellTemplates profiledCellTemplates = GWT.create(ProfiledCellTemplates.class);
 
					SafeHtml result = super.renderChild(parent, child, depth, renderMode);
					if(child.mustBeHighlighted()){
						return profiledCellTemplates.colorComponent(result, "red");
					}
					return result;
				}

**OrigineDeLaVie** · 12/11/2013, 15h25

Je n'accédais pas au texte affiché pour une feuille, tout ce que je pouvais modifier avec la tentative ci-dessus, c'était la couleur de fond.
mais pour changer la couleur du texte (libellé d'un élément) ou le mettre en gras, je ne pouvais pas

une solution, est de récupérer le String resultAsString = result.asString(); où (SafeHtml result = super.renderChild(parent, child, depth, renderMode); )

on trouvera que :
resultAsString ressemble à :{ <div id="x-widget-9_45_/MyArbo/2013/12/libelle_element" class="GC3IAI4BBPB">
........<span class="GC3IAI4BEPB">libelle_element_id_k</span></div></div>

ensuite on effectue la modif comme suit (modifier la chaine libelle_element_id_k et la remplacer dans resultAsString ):

Code :

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
 
interface ProfiledCellTemplates extends XTemplates {
		@XTemplate("<div style=\"color:green;font-style:italic;font-weight:bold;\">{data}</div>")
		public SafeHtml changeStringStyle(String data);
	}
 
 
 
@Override
				protected SafeHtml renderChild(ILibelleThfCatalogNode parent, ILibelleThfCatalogNode child, int depth, TreeViewRenderMode renderMode) {
					final ProfiledCellTemplates profiledCellTemplates = GWT.create(ProfiledCellTemplates.class);
 
					SafeHtml result = super.renderChild(parent, child, depth, renderMode);
 
                String libelleElement = child.getName();
		String resultAsString = result.asString();
		String coloredLibelleElement = profiledCellTemplates.changeStringStyle(child.getName()).asString();
		resultAsString = resultAsString.replace(libelleElement , coloredLibelleElement );
		return (new SafeHtmlBuilder().appendHtmlConstant(resultAsString)).toSafeHtml();
}
 
		};

[[/QUOTE]