IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
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 ?



Par quoi commencer pour faire une application Ext-JS ?
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>

Dois-je ajouter des objets HTML particuliers ?
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>

Puis-je ajouter des objets 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.


Où dois-je placer le code de mon application ?
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.


Comment démarre mon application ?
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() {
  // 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() {
  }
}

Puis-je utiliser Ext-JS si j'ai inclus une autre bibliothèque ?
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.


Puis-je ne charger que les composants dont j'ai besoin ?
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.


Comment définir une classe ?
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 :
//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 exemples.


Comment charger les sources nécessaires à une classe ?
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']
});

L'héritage multiple est-il supporté ?
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 :
//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'
    }
})

Comment définir un singleton ?
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
   ...
});

À quoi servent les namespaces ?
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) { ... };

Dois-je définir un namespace ?
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.


Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.