Extend ou comment créer son propre composant
Introduction :
Le framework extJs est basé sur la programmation orienté objet. Par conséquent, tout ses composants sont des classes. A chaque fois qu'un composant est une amélioration ou à besoin des fonctionnalités d'un autre on utilise l'héritage.
Ainsi, toutes les classe qui affiche un cadre comme Ext.Window, Ext.treePanel,Ext.gridPanel ... héritent de la classe Ext.Panel. Ext.Panel contient toutes les propriétés, méthodes et évènements possibles sur un panel. De cette manière toutes les classes qui hérite de Ext.Panel peuvent elles aussi utiliser tous les outils propres aux panels.
Vous pouvez consulter le modèle objet de extJs ici : Ext_JS_3.1.pdf
Grace a la Programmation Orienté Objet,l'héritage et Ext.extend vous pouvez vous aussi créer vos propre composants.
Rappel :
Lors de la création du objet, on peut spécifier ses différentes propriétés de configuration.
Exemple :
var maFenetre = new Ext.Window({
title : 'ma nouvelle fenere', //le titre de la fenetre
width:500, //la largeur
height:250, // la hauteur
});
Ainsi le titre de la nouvelle fenêtre serra 'ma nouvelle fenere', la largeur de 500px et la hauteur de 250px.
Ceci est possible car la classe Window posède une méthode constructor qui récupere un parametre config.
constructor : function(config) { ... }
Le contenu du paramètre config est l'objet que vous avez passé à new Ext.window();
donc dans cet exemple,
config = {
title : 'ma nouvelle fenere', //le titre de la fenetre
width:500, //la largeur
height:250, // la hauteur
})
La configuration spécifié lors de la création de l'objet écrase la configuration par défaut de la classe. Par exemple, lors de la création d'un objets fenêtre, si vous ne spécifiez pas de titre, le titre par défaut sera "sans titre". Lorsque vous spécifiez un titre, par exemple 'ma nouvelle fenere' alors le titre par defaut est remplacé par le votre. Ceci est possible car à l'intérieur de la méthode constructor il y à cette commande :
configuration = Ext.apply( {
title : 'sans titre'
}, config);
Ext.apply remplace les propriétés du 1er paramètre { title : 'sans titre' } par celles trouvées dans le 2ème paramètre (config) et retourne le résultat dans la variable configuration.
Enfin, en programmation objet, lorsqu'on utilise une methode qui existe aussi dans la classe parente ( la superclass ) il faut generalement prevenir la classe parente qu'elle doit à son tour executer sa prope function du même nom.
Ceci s'execute avec la méthode CALL:
NomDeLaNouvelleClasse.superclass.nomDeLaMethode.call(this, config);
Exemple :
( Cet exemple ne demontre pas spécialement l'interet de créer son propre composant mais sa simplicité permet une meilleur comprehension. )
Création d'une nouvelle classe maFenetrePerso :
Dans une nouvelle page : MaFenetrePerso.js
/**
* @class MaFenetrePerso
* @extends Ext.Window
*/
MaFenetrePerso = Ext.extend(Ext.Window,{
constructor : function(config) {
config = Ext.apply({
title : 'aucun titre',
width:500,
height:250,
x:10,
y:10,
layout:'fit',
maximizable:true
}, config);
MaFenetrePerso.superclass.constructor.call(this, config);
}
});
Création de l'objet issue de cette nouvelle classe :
Dans une page : maFenetre.js
Ext.onReady(function(){
var maFenetre = new MaFenetrePerso({
title:' ma fenetre perso'
})
/*
* Affichage de la fenetre
*/
maFenetre.show();
});
Création de la page html :
Page maFenetre.html :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/MaFenetrePerso.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/maFenetre.js"></script>
</head>
<body>
</body>
</html>