Discussion :

[Eric Pasquier]

Bonjour !

J'ai un dijit.Tree avec de longues lignes.
Le cadre dijit.layout.ContentPane fait apparaître un ascenseur horizontal :

Code :

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

1
2
3
4
5
6
 
  <div dojoType="dijit.layout.ContentPane" region="center" >
    <div dojoType="dojo.data.ItemFileReadStore" jsId="storePlan1" url="<?php echo BASE_URL . '/datastore/getreferentiel/plan/1' ?>"></div>
    <div dojoType="dijit.tree.TreeStoreModel" jsId="modelPlan1" store="storePlan1" labelAttr="name" childrenAttrs="children" query="{top:true}"></div>
    <div dojoType="dijit.Tree" id="planTree1" model="modelPlan1" ></div>
  </div>

Je voudrais que les lignes du dernier niveau, qui sont très longues, passent à la ligne suivante, comme dans une balise <li> par exemple.
J'ai essayé de bidouiller avec du CSS et même du JS mais je n'y arrive pas.
Quelqu'un a-t-il une idée comment faire ?

Merci,
Eric.

[emmanuel.remy]

Salut,

Redéfinis la fonction getLabel du Tree. Par défaut son code est:

Code :

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

1
2
3
	getLabel: function(item){
		return this.model.getLabel(item);
	},

A ta place je la redéfinirais simplement par un simple dojo.extend plutôt que par un héritage brut. Tu peux obtenir la taille de la chaine et la segmenter avec des BR ou autre.

ERE

[emmanuel.remy]

Re,

Je modère un peu ce que j'ai écrit: le BR ne sera pas pris en compte car il le traite comme un noeud text. Après avoir regarder de plus prêt, une solution est celle-ci:

Code :

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

1
2
3
4
 
	<style type="text/css">
		#arbre .dijitTreeRow {height:2.2em}
	</style>

ensuite:

Code :

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

1
2
3
4
		dojo.extend(dijit._TreeNode,
		{setLabelNode: function(label){
			this.labelNode.innerHTML = label;
		}});

puis quelque chose comme (pris comme exemple sur un test dojo puis modifié):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div dojoType="dijit.tree.ForestStoreModel" jsId="customModel" store="store">
		<script type="dojo/method" event="getLabel" args="item">
			if(item.root){ return "States"; }
			return (store.getLabel(item) + " <br> (" + store.getIdentity(item) + ")");
		</script>
	</div>
 
	<div dojoType="dijit.Tree" id="monArbre" model="customModel" openOnClick="true">
		<script type="dojo/method" event="getLabelStyle" args="item,opened">
				return {position: "absolute",
						left: "90px" };
		</script>
	</div>

Pour moi le rendu est correct, reste à toi de couper convenablement test textes...

Et sinon il existe aussi une version de la grille dojox.grid qui se comporte comme une arbo.

ERE