ExtJs
ExtJs est une bibliothèque javascript faisant parti d'un gros tas de bidules nommé Sencha.
ExtJs se base comme tout bon vieux framework javascript sur Ajax, DHTML et DOM.
Sa force réside dans la fourniture d'éléments sexy pour formulaire et la bonne consistance du code. Même les extensions ou plugins du core sont bien fagotées car la communauté incite à programmer en objet élégant (Ext.extend(MyDataStore, Ext.data.Store, {...).
Les seuls bémols :
- pas d'accès en lecture au SVN à moins de cracher au bassinet.
le troll récurrent sur la licence de distribution (pour les juristes que ça intéresse).osef- les nouvelles versions et nouvelles pratiques qui éclatent les utilisateurs en plein de versions (ext2, ext3 et ext4)
Objets
- Ext.form formulaires
- Ext.grid tableaux sexy
- Ext.window popup sexy (sisi!)
- Ext.Direct
- MVC : patron de conception *fortement* conseillé pour le web et/ou le travail en équipe
Erreurs courantes
invalid property id
T'as oublié une virgule dans ta liste de config:
types[config.xtype || defaultType] is not a constructor
Parfois aussi : a[c.xtype || d] is not a constructor :
- souvent un xtype: 'objet_qui_n_existe_pas', trompette !
- ou xtype: 'Camelcase' alors qu'il s'appelle 'CamelCase', idiot.
Ext.ux.form is undefined
Vérifiez bien d'avoir inclus tous les fichiers de vos plugins, pas de 404 etc. Dans firebug, onglet 'HTML, cliquez sur le + en face du nœud <head/> et vérifiez que vos objets sont bien chargés.
Si c'est un plugin à vous, rajoutez en haut de votre fichier .js :
Ext.ns('Ext.ux.form');
document.getElementById() vs Ext.get vs Ext.getCmp
Ext.get == document.getElementById() + Ext methods()
Ext.getCmp n'est que pour les Ext.Component.
Exemple avec un noeud du DOM :
<input type="hidden" name="ccnum" id="ccnum_id" value="12345678900" />
<source lang="javascript">
var totoche= document.getElementById('ccnum_id');
console.info(totoche.id);
ccnum_id
console.info(totoche.value);
12345678900
</source>
Ext.getCmp n'est d'aucune aide avec des noeuds DOM : <source lang="javascript">
var totoche= Ext.getCmp('ccnum_id');
undefined
</source>
Par contre toutefois néanmoins en revanche(plus classe), Ext.get transforme le DOM en objet Ext :
<source lang="javascript">
var totoche= Ext.get('ccnum_id');
console.info(totoche.id);
ccnum_id
console.info(totoche.value);
undefined
console.info(totoche.getValue());
12345678900
</source>
Snippets
Object to Array
Avant :(
[Object {num=1, nom="toto", couleurDuSlip="bleu"}, Object {num=2, nom="fifi", couleurDuSlip="rose"}, ...]
Après :)
[[1, "toto", "bleu", ...], [2, "fifi", "rose", ...],
<source lang="javascript"> console.info(aObjects); var aOptions; var aArrays= [ [0,'Aucune', ] ]; // si aucun chx Ext.each(aObjects,function(obj) { aOptions= []; // vide aOptions[0]= obj.num; aOptions[1]= obj.nom; aOptions[2]= obj.couleurDuSlip; aArrays.push(aOptions); }); console.info(aArrays);
var recStore = new Ext.data.SimpleStore({ fields: ['numext', 'valeur', 'slip'], data : aArrays });
console.info('recStore=');
console.info(recStore);
</source>
createDelegate ou passer un tableau à un callback
createDelegate permet de passer des extra paramàtres à un callback(handler:), sisi.
Signature :
createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] )
Explication (tirée de la doc) :
Créé un délégué (un autre callback) qui positionne le scope pour obj. Appelle directement n'importe quelle fonction.
Exemple abstrait : this.myFunction.createDelegate(this, [arg1, arg2]) va créer une fonction qui est autmatiquement scopée sur l'objet(ici this), ainsi la variable this à l'intérieur du callback pointe vers l'objet.
Exemple concret : <source lang="javascript"> var direSalut= function(name){
// Notez l'utilisation de "this.text" ici. Cette fonction attends d'etre executée avec un objet de scope ayant text comme attribut
// ici, this pointe sur l'objet btn plus bas
alert('Salut, ' + name + ' ?. You clicked the "' + this.text + '" button.');
}
var btn = new Ext.Button({
text: 'Dire salut', renderTo: Ext.getBody()
});
// Ce callback va exécuter dans le scope de l'instance d'un Button. // ça affichera : // "Salut, t'es russe ?. You clicked the "Dire salut" button." btn.on('click', direSlut.createDelegate(btn, ['t\'es russe'])); </source>
Liens :
- http://www.sencha.com/forum/showthread.php?4395-Help-Passing-parameters-in-handler-functions
- http://stackoverflow.com/questions/690343/how-do-i-add-additional-parameters-to-an-extjs-handler
Rajouter un sablier
Pour afficher un sablier : <source lang="javascript"> var myMask = new Ext.LoadMask(Ext.getBody(), {msg:'Prends moi un 102 stp...'}); myMask.show();
et plus tard : myMask.hide(); </source>
Sencha Architect
Désactiver des checkbox de ligne
Manip utilisant le renderer pour griser/masquer une checkbox suivant des valeurs du Record de la ligne :