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

@+

[takitano]

ola ...

Je crois que le pb vient du fait que tu as mis width:'100%' et height:'100%'.
Extjs ne comprends pas le caractère "%"

enlève carrément ces deux parametres ... le layout fit prend tout l'espace nativement...

sinon par rapport a un IDE javascript, je peut te conseiller l'IDE aptana qui est un clone de Eclipse, avec tous les outils java.
perso, c'est pas mon truc ...

[yann290276]

hola que tal ?

Ben j'avais aussi essayé de supprimer les "%", mais ca marchait pas.... bref....

Pour l'editeur, en fait, j'etais pas tres clair, mais c'est moi qui veut developper un editeur ! Et la contrainte que je me suis imposé c'est que ca doit etre fait en "client leger" (donc ajax principalement, et zend coté server)

Sinon, je te rassure j'utilise eclipse pdt et skpet (pour javascript) pour coder tout ca !

[takitano]

Bonjour,

j'ai pas été assez clair ...
si tu laisses width : '100', ou width : '100%', alors extjs comprends que c'est toujours 100 px,
par contre, si tu commentes cette partire cdu code, alors, le layout sera utilisé ...

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
 
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 ]
						});

Sinon, pour l'autocompletion, tu as Extjs qui as un truc ... sinon, j'ai l impression que c'est YUI 2.0 qui semble avoir le meilleur code, car il est implementé dans bcp de site ... sinon tu as jquery .ect..
je te conseillerais d'utiliser extjs si possible, car ca t evite de charger une nouvelle librairie, et ca t evite des pb de compatibilité ...

Takitano,