dijit.Tree avec de longues lignes

Bonjour !

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

Code:

---

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>

---

http://rd.bepconcept.com/dijit_tree.png

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.

Salut,

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

Code:

---

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

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:

---

1 2 3 4

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

---

ensuite:

Code:

---

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:

---

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