Créer un portal

Bonjour,

J'aurais aimé savoir comment faire pour créer un 'portal' sous Ext JS (comme dans l'exemple du site). Pour le moment, j'ai le code suivant, qui ne fonctionne pas :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var viewport = new Ext.Viewport({ layout: 'table', layoutConfig: {columns: 1}, items: [{ xtype: 'portal', items: [{ columnWidth: .95, items: [{ title: 'mon premier panel', contentEl: 'monPremierPanel' }, monSecondPanel //defini de la meme maniere que le premier ] }] }] }); viewport.render('MyDiv');

---

J'ai cru comprendre (d'après le code source de l'exemple cité plus haut) qu'il fallait des extensions pour faire fonctionner le portal. Si oui, où est-ce que je peux me les procurer ? Si non, qu'est-ce qui pourrait clocher dans le code ci-dessus (les erreurs sont de type : "Object expected") ?

Merci.


Mako

bonjour,

ton objet est de type portal
rajoute le code suivant, en modifiant [domaine]

Code:

---

1 2 3 4 5

<link rel="stylesheet" type="text/css" href="[domaine]/ux/css/Portal.css" /> <script type="text/javascript" src="[domaine]/ux/Portal.js"></script> <script type="text/javascript" src="[domaine]/ux/PortalColumn.js"></script> <script type="text/javascript" src="[domaine]/ux/Portlet.js"></script>

---

Effectivement, cela fonctionne mieux...Mais ce n'est pas encore parfait !

J'ai bien mon portal, mais il ne s'affiche pas où je le souhaite. J'ai une page composée d'un header, d'un menu (colonne à gauche) et d'une zone principale. Je veux que mon portal s'affiche dans la zone principale (fichier search.jsp).

Le code que j'ai posté précédemment, tout comme la div 'MyDiv' se trouvent tous les deux dans le fichier search.jsp, mais malgré ça, mon portal s'affiche tout en haut de la page (avant même le header), laissant la zone principale vide. A noter qu'aucune erreur JavaScript n'est signalée...

Mako

il y a koi dans search.jsp ?

Le fichier search.jsp est celui qui est chargé dans la zone principale. Il comporte donc quelques scripts (dont la partie Ext JS), ainsi que du html (des tables avec des contrôles perso).

Ce que je veux faire, c'est moderniser un peu l'ensemble. Comme la plupart des composants sont des taglibs persos (développées par d'autres personnes), et que je cherche seulement à faire une maquette (pas une migration complète) pour tester Ext JS, je voulais juste inclure les composants existants (présents dans le html de search.jsp) dans des panels Ext JS avec lesquels on pourrait "jouer" un peu (collapse, portal, etc.). Pour ce faire, j'ai créer une div <div id='MyDiv'> qui englobe tout ce que je souhaite mettre dans mon panel, puis quand j'écris dans le code ci-dessus "MonPremierPanel", je mets l'id de ma div.

Cela fonctionnait parfaitement pour des panels "normaux", c'est-à-dire que j'avais bien mes deux panels, avec les composants dedans, dans la partie principale de ma page. Mais avec le portal, ils se retrouvent en dehors du "cadre" définis par mon template (qui me spécifie trois zones distinctes, avec, selon les cas, les fichiers à charger dans chaque partie).

J'espère avoir été assez clair (pas sûr...).

Mako

une idée comme ca ...

mettre une autre div myPortal dans ta div ... pour voir ...

Ok pour mettre un div 'MyPortal' dans ma div, mais que suis-je censé en faire ensuite ?

Pour le moment, j'ai trois div dans mon html. La première, vide, me sert à "positionner" mon panel. Les deux suivantes servent à englober les contrôles que l'on retrouvera dans les deux items de mon panel.

Code:

---

1 2 3 4 5 6 7 8 9

<div id="MyDivExtJS" > </div> <div id="MonPremierPanel"> //Composants HTML </div> <div id="MonDeuxiemePanel"> //Composants HTML </div>

---

ah oui, dsl ...

faire un

viewport.render('monPortal');

J'ai édité le code ci-dessus, dans lequel j'avais fait une erreur (la première div ne comprend pas les deux autres).

J'ai déjà essayé de faire un

Code:

---

1 2	viewport.render('MyDivExtJS');

---

mais cela ne changeait rien. Du coup, quel intérêt de rajouter encore une nouvelle balise ?

Mako

ok ...

je crois avoir , compris ...

je eu le meme soucis ... il y a kelke mois ...

en fait le viewport, est un objet qui va prendre toute ta page ... , dont Ext essayera de placer ton viewport tout en haut dans le body ...

la solution est de remplacer ton objet viewport par un simple panel, et tout devrait revenir dans l'ordre ...

Ok, ça fonctionne, et au bon endroit !

J'utilisais un viewport, tout simplement parce que j'avais du voir ça dans l'exemple du site...Mais mettre le panel en lieu et place du viewport fonctionne nickel !

Petite question subsidaire : est-il possible de supprimer l'espace blanc entre les différents panels de mon portal ?

En tout cas, merci pour tout takitano.

Mako

bien bien ...

tu devrais avoir ce code quelque part ...

Code:

---

style:'padding:10px 0 10px 10px',

---

il faut le desactiver ...

Citation:

---

tu devrais avoir ce code quelque part ...

Code:

---

style:'padding:10px 0 10px 10px',

---

il faut le desactiver ...

---

Ben justement, non, je n'en ai pas...Sinon, je me serais empressé de le faire, bien entendu...

A vrai dire, j'ai même essayer de rajouter des

Code:

---

1 2	style: 'padding: 0 0 0 0',

---

à tous les niveaux (panel, portal, et fils du portal), mais cela ne change rien au résultat final...

Mako