Discussion :

[yann290276]

Bonjour,
j'ai un probleme avec le layout "fit" et un treepanel qui ne veut pas s'étendre sur toute la "place" disponible.

J'ai créé un viewport (deux regions center et west, type "explorer") et je veux mettre un treepanel dans la region west avec un layout "fit" afin qu'il occupe toute la place disponible (hauteur et largeur).

Le probleme, est que lorsque j'ajoute mon controle treepanel, la "div" créée par extJs fait bien "100%", mais les sous elements "div" sont à "100px".

Le résultat HTML est le suivant :


Mon code javascript qui genere ce treepanel :

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
23
24
25
26
27
28
29
30
31
 
/** Override : Init app components */
			initComponent : function() {
 
				var treeLoader = new testapp.components.fsLoader({
							dataUrl : this._serverURI + '/test/index/get.fs',
							xmltags : ['folder', 'file']
						})
				treeLoader.on('beforeLoad', this.onTreeBeforeLoad, treeLoader);
 
				var oTree = new Ext.Container({
							id : 'tree-control-container',
							width : '100%',
							height : '100%',
							layout : 'fit',
							items : {
								xtype : 'treepanel',
								id : 'tree-panel',
								margins : '2 2 0 2',
								autoScroll : true,
								rootVisible : false,
								layout : 'fit',
								root : new Ext.tree.AsyncTreeNode(),
								// Our custom TreeLoader:
								loader : treeLoader
							}
						});
				this.container.add(oTree);
				oTree.doLayout();
				//this.container.doLayout();
			},

Pour informations, this.container contient une reference à la region "west" du viewport obtenue avec viewport.get('navigation-area').

Quelqu'un a une idée ?

Merci !

[yann290276]

Apres quelques tests, je m'aperçois que si j'ajoute le treepanel directement dans le container de la region "west" du viewport avec un layout "fit", mon treepanel prend bien toute la place disponible...

Je ne comprends pas pourquoi si je je créé d'abord un container avec layout "fit" dans la region "west" du viewport, puis le treepanel dans ce container ca ne fonctionne pas.

J'aimerai bien trouver la réponse !

Merci d'avance pour votre aide !

[takitano]

ola mon ami ...
t es un leve tot ... ^^

voici mes recommendations ...

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
27
28
29
30
31
 
/** Override : Init app components */
			initComponent : function() {
 
				var treeLoader = new testapp.components.fsLoader({
							dataUrl : this._serverURI + '/test/index/get.fs',
							xmltags : ['folder', 'file']
						})
				treeLoader.on('beforeLoad', this.onTreeBeforeLoad, treeLoader);
 
				var oTree = new Ext.Container({
							id : 'tree-control-container',
							width : '100%',
							height : '100%',
							layout : 'fit',
							items : [{ //ajout de [
								xtype : 'treepanel',
								id : 'tree-panel',
								margins : '2 2 0 2',
								autoScroll : true,
								rootVisible : false,
								/*layout : 'fit',*/
								root : new Ext.tree.AsyncTreeNode(),
								// Our custom TreeLoader:
								loader : treeLoader
							}]//ajout de ]
						});
				this.container.add(oTree);
				oTree.doLayout();
				//this.container.doLayout();
			},

bon, ..; si ca ne marche pas ...
je pense qu'il faudrait rajouter
treeLoader.on('Load', this.onTreeBeforeLoad, function(){oTree.doLayout();});
ca me parait plus logique ...

voila ... a premiere vu ...

[yann290276]

Hello !
le truc c'est que j'avais déjà essayé le doLayout apres le "load"... mais ca marche pas mieux.
d'apres ce que j'ai compris en faisant des tests, c'est que mon treePanel n'aime pas etre dans un container qui a un layout "fit" dans la region "west" du viewport. Alors pourquoi, je me pose tjs la question.... et debugger des gros fichiers javascript (extjs-all-debug.js) avec chrome, ben ca plante...

Bref, j'ai trouvé l'alternative, mais c'est... bizarre... en plus il faut que je mette l'autoscroll sur la region west du viewport et pas du treepanel du coup (sinon, pas de scroll bar).

[takitano]

Essaye de remplacer Ext.Container par ext.Panel ...

Je vais faire des tests de mon coté ...

[yann290276]

Hello ! J'ai également essayé avec un panel, mais ca marche pas non plus.... bref, je suis resté sur ma première solution (integrer directement le treepanel dans la region west du viewport sans le mettre dans un autre container).

Et puis là, je me penche sur les solution d'editeur de code en javascript et les techniques d'autocompletion de code (rien de rien sur google ni sur les forums ici), si t'as des idées !

Enfin si, j'ai trouvé codemirror, ecrit en javascript et capable de faire de la coloration syntaxique de plusieurs langages (dont PHP, javascript, et HTML, ce qui m'interesse le plus !)

@+