Discussion :

[Mako 5013]

Bonjour,

J'aurais aimé savoir comment faire pour intégrer Ext JS (3.1) avec le framework JSF (1.1). Je dois intégrer Ext JS au sein d'une application déjà existante, travaillant au niveau de la couche présentation principalement avec JSF.

J'ai eu beau chercher sur le Net, difficile de trouver un tutoriel ou bien même des indications sur comment faire...

Merci.

Mako

[takitano]

Salut,

je ne crois pas que tu puisse intégrés Extjs 3.1 avec JSF ... ah moins de créer une passerelle entre java et javascript ...

sinon, Etxjs propose Ext gwt ,
C'est la version Java de Extjs. Tu peux avoir plus de renseignement sur le lien suivant ... Il me semble qu'ils sont à la version 2.2...
http://www.extjs.com/products/gwt/

Si tu sais codé en java ... mieux vaut utiliser le Gwt de extjs ...

En espérant d'avoir répondu a ta problématique ...

Takitano

[Mako 5013]

je ne crois pas que tu puisse intégrés Ext js 3.1 avec JSF ... ah moins de créer une passerelle entre java et javascript ...

Je ne comprends pas vraiment le soucis...Par exemple, le projet auquel je dois intégrer Ext JS utilise déjà (très partiellement) Prototype et Scriptaculous, et il suffit d'inclure les .js pour que cela fonctionne. Pourquoi ne pourrait-il en être de même avec Ext JS ?

En ce qui concerne Ext GWT, je te remercie de me le signaler, mais je le connaissais déjà. En fait, il fait également parti des frameworks présentation que je dois évaluer...Je travaillerai donc avec lui un peu plus tard...

En tout cas, merci de la réponse.


Mako

[takitano]

Re,

Je ne sais pas trop ce que tu recherches ...

mais peut etre tu trouveras ton bonheurs la :
http://www.extjs.com/learn/Ext_Getting_Started
http://www.extjs.com/learn/Tutorials
http://www.extjs.com/learn/Screencasts

et pour evaluer Extjs par rapport au autre framework, tu as :
http://www.extjs.com/products/js/

[Mako 5013]

Re,

Je n'ai pas été très clair effectivement. Je travaille donc sur une application web, utilisant JSF, Spring, Ajax4jsf et Prototype/Scriptaculous. Mon but (pour des raisons trop longues à expliquer, et sans rapport avec le schmilblick) est de pouvoir également travailler avec Ext JS.

J'ai téléchargé ce dernier (v. 3.1), et l'ai mis dans "/WebContent/js/extjs/". Pour le moment, j'aimerais juste voir si cela fonctionne, et donc, dans la première page de mon appli, je souhaite juste rajouter une alert en faisant :

Code :

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

1
2
3
4
 
Ext.onReady(function() {
     alert("coucou");
});

J'ai pour cela rajouté les lignes suivantes :

Code :

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

1
2
3
 
<script language="JavaScript" src="/js/extjs/ext-all.js"/>
<link rel="stylesheet" src="/js/extjs/ressources/css/ext-all.js"/>

Le problème est qu'il ne m'exécute pas mon code ext js, car " 'Ext' is undefined ". Une idée ?

Mako

[takitano]

essayes ca ...

Code :

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

1
2
<script type="text/javascript" src="/js/extjs/ext-all.js"/>
<link rel="stylesheet" type="text/css" href="/js/extjs/ressources/css/ext-all.js"/>

Takitano

[Mako 5013]

Ça ne fonctionne toujours pas...(même erreur).
Mais merci tout de même

Mako

Edit : Y a-t-il une chance que cela vienne de la version de Ext JS ? Actuellement, je suis sur la 3.1.1. Parce que le chemin m'a l'air correct (quand je regarde les sources de ma page HTML, j'ai bien le même chemin pour Ext JS que pour Prototype par exemple, qui lui, fonctionne...).

[takitano]

essayes un chemin absolu ou

Code :

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

1
2
<script type="text/javascript" src="/WebContent/js/extjs/ext-all.js"/>
<link rel="stylesheet" type="text/css" href="/WebContent/js/extjs/ressources/css/ext-all.js"/>

A priori, c'est un pb de chemin d'access ...
je ne pense pas qu'il y ait des interferences ... toute la lib d'Ext est sous ne namespace Ext ... a moins que Proto utilise le meme namespace ...

[Mako 5013]

Cela ne fonctionne toujours pas...

Par contre, au départ, j'avais essayé de mettre le Ext.onReady() dans un fichier annexe (MyExtJS), qui se trouvait au même endroit que ext-all.js. L'importation de ce fichier fonctionnait bien, mais pas le code ext js à l'intérieur. Pour être plus précis, j'avais :

MyPage.jspx

Code :

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

1
2
3
4
 
<script type="text/javascript" src="/js/extjs/ext-all.js"/>
<script type="text/javascript" src="/js/extjs/myExtJS.js"/>
<link rel="stylesheet" type="text/css" src="/js/extjs/ressources/css/ext-all.js"/>

MyExtJS.js

Code :

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

1
2
3
4
5
6
 
alert("coucou 1");
Ext.onReady(function() {
     alert("coucou ext js");
});
alert("coucou 2");

Et je voyais bien apparaître la première alert ("coucou 1"), pas les deux suivantes. Donc je me dis que le chemin d'accès ne doit pas être si mauvais que ça, et que c'est réellement le fichier ext-all.js (j'ai également essayé avec le ext-all-debug.js) qui doit avoir un soucis.

Mako

[takitano]

Tu mets ton fichier CSS avec l'extension .CSS au lieu de .JS

Code :

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

<link rel="stylesheet" type="text/css" src="/js/extjs/ressources/css/ext-all.css"/>

Puis, tu mets tes fichier javascript

Code :

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

1
2
<script type="text/javascript" src="/js/extjs/ext-all.js"/>
<script type="text/javascript" src="/js/extjs/myExtJS.js"/>

[Mako 5013]

Pour l'extension .css, c'est juste une erreur de copié/collé dans ce thread, ce n'est donc pas la cause du problème.

J'ai inversé l'ordre entre les css et les javascript, mais rien n'y fait...
J'ai également rajouté le fichier ext-all-base.js (sur un autre forum, on m'a conseillé de le rajouter), mais cela n'a fait que me rajouter une erreur de "stack over flow"...

Mako

[takitano]

Essayes de rajouter avant ext-all.js

Code :

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

<script type="text/javascript" src="http://localhost/js/extjs/adapter/ext/ext-base.js"></script>

important,
d'apres la doc extjs ... il faut mettre les lib prototype et autre après ceux de Extjs ...

[Mako 5013]

Ça y est, cela fonctionne !
En fait, le problème était double. D'une part, il fallait mettre le fichier ext-base.js, et d'autre part, il fallait mettre les autres librairies après celles de Ext JS. J'avais pris en compte ces deux problèmes, mais pas simultanément apparemment...Le code correct est donc :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
<link rel="stylesheet" type="text/css" src="/js/extjs/ressources/css/ext-all.css"/>
//On inclus ici les autres fichiers css
 
<script type="text/javascript" src="/js/extjs/adapter/ext/ext-base.js"/>
<script type="text/javascript" src="/js/extjs/ext-all.js"/>
<script type="text/javascript" src="/js/extjs/myExtJS.js"/>
//On inclus ici les autres librairies (Prototype,etc.)

Merci beaucoup takitano pour le coup de main.

Mako