Nouveau système de classe

Définition de la classe :

Vous pouvez toujours utiliser l'ancienne syntaxe new ClassName() dans Ext 4, mais il est préférable d'utiliser la nouvelle fonction Ext.define  pour définir de nouvelles classes. En définissant les classes cette façon, toutes les caractéristiques de classe ajoutés dans les sections suivantes sont activés. Le mot-clé  new fonctionne toujours, mais sans ces avantages.

Un avantage supplémentaire d'utiliser  Ext.define est qu'il va automatiquement détecter et de créer des nouveaux espaces de noms nécessaire.

Voici un exemple simple de l'ancienne et de la nouvelle syntaxe pour lesquelles vous définissez une classe personnalisée qui étend un composant existant ExtJS :

// ExtJS 3:
Ext.ns('MyApp'); 
MyApp.CustomerPanel = Ext.extend(Ext.Panel, {
    // etc.
});

// ExtJs 4
Ext.define('MyApp.CustomerPanel', {
    extend: 'Ext.panel.Panel',
    // etc.
});

Chargement des classes :

ExtJs 4 inclut désormais un solide système de chargement dynamique de classe qui assure également la gestion intégrée de dépendance. Encore une fois, cette fonctionnalité est facultative, mais fournit un couple de grands avantages:

• Chargement dynamique : les classes peuvent être chargées dynamiquement et de manière asynchrone à l'exécution simplement basé sur l'arbre des dépendances que ExtJs gère en interne. Cela  signifie que vous n'avez plus besoin d'inclure les scripts dans les pages HTML et simplement laisser le chargeur de classes inclure ceux que votre page a besoin pour fonctionner. C'est surtout utile dans l'environnement de développement où la souplesse de dépendance est plus importante que la vitesse de chargement des pages.
• Génération dynamique : Pour la production, il est généralement préférable de compiler votre code dans un seul fichier. ExtJs4 connais maintenant le schéma complet de dépendance lors de l'exécution, il peut facilement générer le schema dont vous avez besoin.  Et plus important encore, cette capacité n'est pas limitée à l'espace de noms Ext. Vous pouvez inclure n'importe quelle classes et espaces de nom personnalisées tant que tout est défini à l'aide de la classe Define, ExtJs  sera en mesure de comprendre comment vos classes sont organisées. Dans un avenir un développeur ExtJs4 pourront en un clic, générer automatiquement leur fichier personnalisé contenant toutes les classes de l'application.

Ce chargement dynamique est activé en utilisant simplement Ext.define et en définissant les dépendances dans le code en utilisant deux propriétés nouvelle classe:

• requires: Les dépendances de classe requis pour le fonctionnement. Vous êtes sure que vos dépendances seront chargées avant la classe qui l'appelle.
• uses: les dépendances de classe facultatif qui sont utilisés mais pas obligatoire. Ceux-ci peuvent être chargés de manière asynchrone et n'ont pas besoin de la classe pour être instancié.

Mixins :

Il s'agit d'une nouvelle approche pour ajouter des fonctionnalités personnalisées dans des classes existantes. Ceci est similaire à l'actuel fonction  Ext.override , même si elle ne remplace pas les méthodes existantes comme le fait override, elle augmente simplement le prototype de ce qui est nouveau. exemple de syntaxe:

Ext.define('Sample.Musician', {
    extend: 'Sample.Person',

    mixins: {
        guitar: 'Sample.ability.CanPlayGuitar',
        compose: 'Sample.ability.CanComposeSongs',
        sing: 'Sample.ability.CanSing'
    }
});

Statics :

N'importe quelle classe peut maintenant définir des méthodes statiques tout simplement en les définissant dans sa  propriété de classe statics.

Config :

En ExtJs3, nous utilisons le terme config pour désigner toutes les propriétés dans un prototype de classe qui, peut être configurer par le code appelant. Bien que cela soit encore vrai dans ExtJs 4, la nouveauté est que lorsque les propriétés de configuration sont spécifié avec  cette  config , il génère automatiquement un getter, setter, reset et apply. Par exemple, étant donné ce code:

Ext.define ('MyClass', {config: {title: "Titre par défaut '}});

... Les méthodes suivantes sont générées automatiquement dans les coulisses:

title: 'Default Title',

getTitle: function() {
    return this.title;
},

resetTitle: function() {
    this.setTitle('Default Title');
},

setTitle: function(newTitle) {
   this.title = this.applyTitle(newTitle) || newTitle;
},

applyTitle: function(newTitle) {
    // custom code here
    // e.g. Ext.get('titleEl').update(newTitle);
}