ExtJs

De Bricosoft.

C'est quand même chiadé

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)

Sommaire

[modifier] Objets

[modifier] Erreurs courantes

[modifier] invalid property id

/t'as oublié une virgule dans ta liste de config:

[modifier] 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.

[modifier] 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');

[modifier] 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" />

 var totoche= document.getElementById('ccnum_id');
 console.info(totoche.id);
 ccnum_id
 console.info(totoche.value);
 12345678900

Ext.getCmp n'est d'aucune aide avec des noeuds DOM : 

 var totoche= Ext.getCmp('ccnum_id');
 undefined

Par contre toutefois néanmoins en revanche(plus classe), Ext.get transforme le DOM en objet Ext : 

 var totoche= Ext.get('ccnum_id');
 console.info(totoche.id);
 ccnum_id
 console.info(totoche.value);
 undefined
 console.info(totoche.getValue());
 12345678900

[modifier] Snippets

[modifier] 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", ...],

	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);

[modifier] 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 : 

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']));

Liens :

[modifier] Rajouter un sablier

Pour afficher un sablier : 

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:'Prends moi un 102 stp...'});
myMask.show();
 
et plus tard :
myMask.hide();

[modifier] Liens

Récupérée de « http://www.bricosoft.com/ExtJs »
Plus