FAQ Ext JS/Sencha
FAQ Ext JS/SenchaConsultez toutes les FAQ
Nombre d'auteurs : 8, nombre de questions : 59, dernière mise à jour : 15 juin 2021
Sommaire→Utiliser Ext-JS- Par quoi commencer pour faire une application Ext-JS ?
- Dois-je ajouter des objets HTML particuliers ?
- Puis-je ajouter des objets HTML ?
- Où dois-je placer le code de mon application ?
- Comment démarre mon application ?
- Puis-je utiliser Ext-JS si j'ai inclus une autre bibliothèque ?
- Puis-je ne charger que les composants dont j'ai besoin ?
- Comment définir une classe ?
- Comment charger les sources nécessaires à une classe ?
- L'héritage multiple est-il supporté ?
- Comment définir un singleton ?
- À quoi servent les namespaces ?
- Dois-je définir un namespace ?
Ext-JS s'exécutant dans un navigateur, il est nécessaire de fournir
au moins une page HTML. Vous pouvez en fournir plusieurs, mais une seule suffit.
Seule l'inclusion de la librairie et de sa feuille de style est nécessaire dans
cette page.
<html xmlns:ext="http://extjs.com/docs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ext-JS Application</title>
<link rel="stylesheet" href="./scripts/ext/resources/css/ext-all.css" type="text/css">
<script type="text/javascript" src="./scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
</head>
<body>
</body>
</html>
L'inclusion de la librairie se fait au travers de deux fichiers : ext-base.js et ext-all.js.
- ext-base.js contient la définition des types et objets de base.
- ext-all.js contient la définition de tous les composants du framework.
Avec la version 4.0, le framework se charge seulement au travers
du fichier ext-all.js.
Aucune balise HTML n'est nécessaire. Toute l'interface de l'application peut être construite par le framework. À titre d'exemple voici le code type proposé par Ext-JS :
Oui, Ext-JS tient compte de votre code HTML. Il est conseillé d'y placer des ID afin d'en faciliter la manipulation par JavaScript.
Tout le code de l'application est à placer dans le header de la page. Soit sous forme de script lié, soit de script en ligne.
Ext-JS utilise et complète la gestion des événements du DOM faite par JavaScript. Ext-JS fournit une méthode pour ajouter un traitement sur l'événement Ready. Cet événement est lancé lorsque l'ensemble est prêt à démarrer. Il suffit donc de placer ce code dans un script du header :
Ext.onReady(function() {
// appeler les méthodes de son application.
});
Avec la version 4.0 vient l'introduction du pattern MVC.
Si vous l'utilisez, insérez la définition de votre application :
Ext.application({
...
launch: function() {
}
}Oui, Ext-JS fournit un mode de compatibilité. À la place de ext-base.js, inclure le fichier correspondant à votre librairie. Ext-JS fournit les adaptateurs suivants ext-jquery-adapter.js, ext-prototype-adapter.js et ext-yui-adapter.js.
Ext-all.js est un fichier compressé contenant tous les composants.
Pour de petites applications, avec ses 1 051 657 octets dans sa version 4.0.0,
c'est peut-être superflu. Dans le dossier pkgs d'Ext-JS
se trouve un fichier par composant.
Jusqu'à la version 3.x, il est nécessaire d'inclure tous les
composants dont on a besoin ainsi que leurs dépendances.
À partir de la version 4.0, Ext-JS propose un
mécanisme de chargement dynamiqueChargement dynamique.
Le framework charge automatiquement, en fonction des besoins, les différents fichiers nécessaires.
Jusqu'à la version 3.x, Ext-JS propose la méthode Extend qui retourne une classe dérivée d'une autre classe :
//Ext-JS 3.x class definition
MyApp.LoginWindow = Ext.extend(Ext.Window, {
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
{
xtype: 'textfield',
name : 'username',
fieldLabel: 'Username'
},
...
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
À partir de la version 4.0 la méthode define permet de définir une classe :
//Ext JS 4.x class definition
Ext.define('MyApp.LoginWindow', {
extend: 'Ext.Window',
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
//as above
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
Merci à Ed Spencer de Sencha pour ces exemplesExemples.
À partir de la version 4.0 le chargement dynamique est supporté. Pour cela, lors de la définition, ajouter la liste des composants requis :
Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires: ['Ext.util.MixedCollection']
});Oui. Jusqu'à la version 3.x, la méthode extend permet l'héritage multiple en prenant une liste de classe en arguments :
//Ext-JS 3.x class definition
MyApp.LoginWindow = Ext.extend(Ext.Window, MyApp.LoginClass, {
La version 4.0 propose un héritage principal simple. Une classe
dérive directement d'une seule autre. Mais cette version supporte un "héritage secondaire"
de classes ou interfaces :
Ext.define('Sample.Musician', {
extend: 'Sample.Person',
mixins: {
guitar: 'Sample.ability.CanPlayGuitar',
compose: 'Sample.ability.CanComposeSongs',
sing: 'Sample.ability.CanSing'
}
})Jusqu'à la version 3.x, Ext-JS ne propose rien de plus que ce que propose JavaScript :
MyApp.UserData.Connection = function(){
...
}();
À partir de la version 4.0, la méthode define
qui permet de définir une classe, permet également de définir un singleton
avec l'attribut singleton à true :
Ext.define('MyApp.UserData.Connection', {
singleton: true
...
});
Les espaces de noms sont, dans la théorie, des ensembles de noms isolés de l'extérieur.
Ainsi, on peut avoir des objets, des variables, des classes, des fonctions qui ont
le même nom. Il suffit pour cela qu'ils soient définis dans des espaces de noms
différents. Par exemple, Ext-JS définit une classe Window.
Si pour mon application j'ai besoin d'une classe Window différente
de celle de Ext-JS, je vais avoir deux classes avec le même nom,
pour peu qu'elles soient définies dans des espaces de noms différents.
JavaScript ne propose pas nativement d'espace de noms. Mais il est facile d'utiliser
des objets en lieu et place des espaces de noms. C'est l'approche proposée
jusqu'à la version 3.x.
Ext est un objet.
Tous les objets de la librairie, toutes les fonctions, les classes, sont des membres
de cet objet.
À partir de la version 4, Ext-JS propose une
méthode pour créer un namespace (un objet JavaScript). Mieux vaut
utiliser cette méthode que de créer un objet simple comme en version 3.x.
En effet, divers composants de la librairie sont capables d'utiliser un namespace ainsi déclaré :
Il est conseillé d'en définir un pour son application. Et de placer dedans tout
ce dont elle a besoin.
Si vous implémentez le design pattern MVC, la première chose à
faire est de définir votre application. Celle-ci doit avoir un nom. Ce nom sera
un objet de type application, mais aussi un namespace dans lequel
placer les éléments la concernant.
Dans la documentation sur MVC, regardez bien l'exemple.
L'application porte le nom de AM et tous les éléments s'y rapportant y sont
attachés :
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
...
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
...
}
});