Tutoriel : Migration de ExtJs3 vers ExtJs4

Migration de ExtJs3 vers ExtJs4

Compatibilité ExtJs3 :

ExtJs 4 est de loin la version la plus complète à ce jour De nombreux changements ont été nécessaires qui ne sont pas compatibles avec ExtJs 3. Toutefois, les développeurs ont fournis beaucoup d'efforts pour assurer le plus de compatibilité ascendante que possible.

Couche de compatibilité JS :

Il s'agit d'un fichier JavaScript optionnel qui peut être chargé après ExtJs 4 et qui fournira les alias et les substitutions nécessaires pour permettreà votre ancien code  ExtJs 3 de fonctionner correctement sous ExtJS 4.

Mode Sandbox :

ExtJS 4 a apporté des changements qui permetent d'isoler complètement ExtJs4 des versions précédentes. Du côté de JavaScript, cela est possible avec l'élimination de toutes surcharges d'objets JavaScript dans ExtJS 4. Maintenant vous pouvez simplement renomer l'objet global EXT et être complètement isolés des versions précédentes.

 

Sur le balisage CSS, ExtJs4 utilise maintenant des styles CSS généré à partir de modèles utilisant Compass & SASS. Avec la nouvelle propriété Ext.baseCSSPrefix, il est désormais extrêmement facile d'isoler une balise généré à partir des versions multiples, sur une seule page. 

Paquet, mise à jours et espace de noms

Toutes les classes et packages ont été restructurées conformément à une convention de nommage stricte. Cela rend les classes plus cohérente et plus facile à trouver. Par exemple, dans ExtJs 3 les classes comme Button, CycleButton et SplitButton ainsi que de nombreuses autres classes ne sont pas regroupées. Les classes sont simplement définies directement sur l'objet global Ext.

 

En ExtJs4, chaque classe est toujours placés dans des packages et des espaces de noms en fonction des fonctionnalités connexes. Ce n'est pas entièrement nouveau, mais cela n'a jamais été appliquées de manière cohérente dans ExtJs3. Retour à l'exemple du bouton ci-dessus, en ExtJS 4 de ces classes sont maintenant:

  • Regroupés en un seul paquet src/button dans le systeme de fichier
  • Regroupés dans un même espace de nom Ext.button (par exemple: Ext.SplitButton → Ext.button.Split)

Toutes les classes qui ont été réorganisés sont toujours disponibles via la nouvelle propriété alternateClassName, de sorte que les  classes ExtJS 3 fonctionneront toujours, si nécessaire, sous Ext 4.  Cependant il est recommandé de migrer vers les nouvelles conventions dans votre propre code.