web-dev-qa-db-fra.com

Comment utiliser Ext.define dans ExtJS 4?

Je suis nouveau sur ExtJS 4 et j'ai besoin d'aide pour comprendre comment Ext.define fonctionne, s'il vous plaît.

En fait, ce que je veux faire est quelque chose de similaire aux portlets dans l'exemple de portail, dans mon application, j'aurai besoin de tant d'objets à ajouter dans mes différents onglets, donc pour organiser mon code et ne pas avoir un seul très gros script, Je veux définir chaque composant dont j'ai besoin dans un fichier séparé, puis l'appeler dans le script principal quand j'en ai besoin (j'utiliserai principalement les exemples, c'est pourquoi je veux savoir comment Ext.define fonctionne pour que je puisse adapter ces exemples et les faire fonctionner comme je le souhaite).

J'espère avoir été clair.

Et merci d'avance pour votre aide.

extjsportletextjs4
21
Armance

Ext.define (String className, Object data, Function createdFn): Ext.Base

Ext.define is used to define a class. Example:

// creates My.computer.NoteBook Class
Ext.define('My.computer.NoteBook', {

     extend:'Ext.panel.Panel',

     config: {

          hardware:'Dell',
          os:'Linux',
          price:500
     },

     constructor:function(config) {

          this.initConfig(config);

          return this;
     }
});


// creates instance of My.computer.NoteBook Class
var myComputer = Ext.create('My.computer.NoteBook', {

     hardware:'MacBook Pro',
     os:'Mac OS X',
     price:1800
});

ainsi, avec Ext.define, vous faites un moule, que vous pouvez utiliser plus tard dans de nombreux cas. Vous pouvez définir la largeur, la hauteur, l'id, le CSS, donc plus tard vous appellerez simplement ce moule/classe. Dans votre cas, vous pouvez définir une classe pour chaque onglet, puis lorsque vous créez une fonction pour ouvrir/créer cet onglet, vous pouvez dire:

if(existingTab){

    mainPanel.setActiveTab(existingTab);

}else{

    mainPanel.add(Ext.create('My.computer.NoteBook', {id:tabId})).show();   
}
...

Vous pouvez mettre chaque classe dans votre fichier .js séparé, plus tard, lors de la production, vous allez créer un class.js avec toutes les classes dans un fichier .js minifié!

Vous pouvez définir une classe et dire ensuite:

items: Ext.create("My.computer.NoteBook",{
        ...
})
24
Davor Zubak

Ext JS 4 a une nouvelle façon d'étendre ... c'est appeler Ext.define et il incorpore Ext.extend, Ext.reg et Ext.ns que nous devions faire dans Ext JS 3 et avant dans un appel de méthode ...

Ext.define('com.sencha.MyPanel', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.mypanel',
    ...
    ...
});

Ext.define prend deux paramètres, le premier est le nom complet de la classe (agira comme Ext.ns pour créer le chemin et créera l'objet) et la configuration. Dans la configuration, vous spécifiez la classe que vous étendez à l'aide de la configuration d'extension. Vous configurez un XType à l'aide de la configuration d'alias. La configuration d'alias est un peu différente car elle comporte deux parties ... la première partie est le type (widget dans ce cas) puis le XType (mypanel).

14
Kunal