| | auteur : sekaijin |
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.
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-all.js"></script>
</head>
<body></body>
</html>
|
|
| | auteur : sekaijin |
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 :
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
|
|
| | auteur : sekaijin |
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.
|
| | auteur : sekaijin |
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.
|
| | auteur : sekaijin |
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() {
});
|
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() {
}
}
|
|
| | auteur : sekaijin |
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.
|
| | auteur : sekaijin |
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 dynamique.
Le framework charge automatiquement, en fonction des besoins, les différents fichiers nécessaires.
|
| | auteur : sekaijin |
Jusqu'à la version 3.x, Ext-JS propose la méthode
Extend qui retourne une classe dérivée d'une autre classe :
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.define('MyApp.LoginWindow', {
extend: 'Ext.Window',
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
|
|
| | auteur : sekaijin |
À 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']
});
|
|
| | auteur : sekaijin |
Oui. Jusqu'à la version 3.x, la méthode extend
permet l'héritage multiple en prenant une liste de classe en arguments :
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'
}
})
|
|
| | auteur : sekaijin |
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
...
});
|
|
| | auteur : sekaijin |
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é :
Ext.namespace('Company.data');
Company.Widget = function() { ... };
Company.data.CustomStore = function(config) { ... };
|
|
| | auteur : sekaijin |
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() {
...
}
});
|
|
lien : À quoi servent les namespaces ?
|
Consultez les autres F.A.Q.
 
|
|
