Aller au contenu | Aller au menu | Aller à la recherche


Ext JS

Par PlaceOweb le jeudi, octobre 20 2011, 00:26 - Javascript - Lien permanent

Ext Js, si vous ne le connaissez pas encore, je vous laisse découvrir cette bibliothèque Javascript nommée Ext (en anglais)

ExtJs6 - ExtJs6.0.x, ExtJs6.2.x, ExtJs6.5.x, ExtJs6.6.x ...

Ext JS 6.6.0 - Jun 14 2018

http://cdn.sencha.com/ext/gpl/ext-6.6.0-gpl.zip 404
extjs/6.6.0/release-notes

Ext JS 6.5.3 - Jan 23 2018

http://cdn.sencha.com/ext/gpl/ext-6.5.3-gpl.zip 404
extjs/6.5.3/release-notes

Ext JS 6.5.1 - Jul 18 2017

http://cdn.sencha.com/ext/gpl/ext-6.5.1-gpl.zip 404
extjs/6.5.1/release-note

Ext JS 6.5.0 - May 10 2017

http://cdn.sencha.com/ext/gpl/ext-6.5.0-gpl.zip 404
extjs/6.5.0/release-notes

Ext JS 6.2.1 - November 21, 2016

http://cdn.sencha.com/ext/gpl/ext-6.2.1-gpl.zip 404
extjs/6.2.1/release-notes

Ext JS 6.2.0 - August 31, 2016

http://cdn.sencha.com/ext/gpl/ext-6.2.0-gpl.zip
extjs/6.2.0/release-notes

Ext JS 6.0.2 - March 25, 2016

http://cdn.sencha.com/ext/gpl/ext-6.0.2-gpl.zip 404
extjs/6.0.2/release-notes

Ext JS 6.0.1 - September 2, 2015

http://cdn.sencha.com/ext/gpl/ext-6.0.1-gpl.zip
extjs/6.0.1/release-notes

Ext JS 6.0.0 - June 27, 2015

http://cdn.sencha.com/ext/gpl/ext-6.0.0-gpl.zip
extjs/6.0.0/release-notes

ExtJs4

Télécharger ExtJs4

Bugs

ExtJs 4.1.0

idProperty

A common mis-configuration of Model is to not specify a proper "idProperty". This config property identifies the primary key of the model. This is easy to forget because "idProperty" defaults to "id". In 4.0, if there was no actual field in the Model by this name, you could encounter JS errors under some circumstances. In 4.1, this has been fixed by automatically defining the field by this name as a "string" property if there is no definition given. This fix can, however, have unexpected side-effects. If you notice that your models have gained an "id" property this is most likely why. The solution is to configure your models with the correct "idProperty" value.

Le tri distant (depuis le serveur) d'une grille/store extjs4

// A ajouter les propriété du datastore
remoteSort:true,

// A l'appel, le serveur recevra
/*
http://www.placeoweb.com/devel/extjs4/test.grid.004.json.read.php?
_dc	1315471548204
limit	10
page	1
sort	[{"property":"my_param","direction":"ASC"}]
start	0

store.sorters.add(new Ext.util.Sorter({
    property : 'shoeSize',
    direction: 'ASC'
}));
*/

Les filtres distants (depuis le serveur) d'une grille/store extjs4

Il est possible de supprimer un filtre spécifique (clearFilter() supprime tout). Pour cela, à la place d'utiliser la méthode store.filter('property_to_filter','value'), utilisez :

// A ajouter les propriété du datastore
remoteFilter:true,

// L'ajout dynamique de filtre
store.filters.add('filtersId', new Ext.util.Filter({
  property: 'property_to_filter',
  value: 'value'
});
store.load();

// A l'appel, le serveur recevra
/*
http://www.placeoweb.com/devel/extjs4/test.grid.004.json.read.php?
_dc	1315479986004
filter	[{"property":"property_to_filter","value":"value"}]
*/

Pour supprimer le filtre, utilisez :

store.filters.removeAtKey('filtersId');

Appliquer les validation des modèles aux formulaires

En plus des attributs "allowBlank, minLength, maxLength, regex, maskRe et stripCharsRe" des Fields (Ext.form.field.TextView xtype: textfield) du Ext.form.Panel, voici comment se servir des "validations" du Ext.data.Model

Tips

Problèmes

Lenteur lorsque l'on cache des colonnes dans une Grid

Ressources ExtJs4

DateTime

DateTime format Grid Colum from date Mysql (2012-12-24 18:50:00)

Pour afficher correctement la date dans votre colonne, il faut : dans le modèle :

{name: 'date_event, type: 'date', dateFormat:'c'},

et dans la définition des colonnes (ici un affichage sans le secondes) :

columns: [{        	
           xtype: 'datecolumn',
           format: 'd/m/Y H:i',
           
           text: 'Événement le',
           flex: 1,
           dataIndex: 'date_event'
        }]

DateTime format

Modifier le rendu d'une cellule (valeur ou style css)

Dans la définition de "columns", il faut surcoucher la méthode de rendu "renderer" :

.x-grid-row .myStyleCss { 
	    background: black;
	    background-color: black; 
	    color: green;
	    font-weight: bolder;
}
{        	
            text: 'Code Postal',
            flex: 1,
            sortable: true,
            dataIndex: 'code_postal',
            
            renderer: function (value, metaData, record, row, col, store, gridView) {
            	console.log(value);
            	console.log(metaData);
            	console.log(record);
            	console.log(row);
            	console.log(col);
            	console.log(store);
            	console.log(gridView);
            	metaData.tdCls = 'myStyleCss'; 
            	return (value=='00000'?'':value);
            }
        }
/*
34162
Object { tdCls= "" , style= "" }
Object { internalId= "1108803", raw={...}, data={...}, more...}
0
15
Object { proxy={...}, folderSort=false, fields=[1], more...}
Object { deferInitialRefresh=false, scroll=true, xtype="treeview", more...}
*/

TreeGrid autoLoad: false

Pour ne pas charger automatiquement la treegrid, il faut 2 propriétés dans déclaration du Ext.data.TreeStore :

root: {        
    	      expanded: false //important for autoload to work properly
    	},
        autoLoad: false,

ou bien dans le reader

autoLoad: false,
        proxy: {
            type: 'ajax',
            actionMethods: 'POST',
            //the store will get the content from the .json file
            url: 'grid.search.read.php',
            reader: {
                type: 'json',
                root: 'children',	// items
                successProperty : 'success',
                totalProperty: 'totalCount',
                
                expanded: true //important for autoload to work properly
            }
        },

TreeGrid store load url POST method

proxy: {
            type: 'ajax',
            actionMethods: 'POST',

TreeGrid with paging (pagination du TreeGrid ExtJs 4)

Extjs 4 et Eclipse

Spket

ExtJs3

Traduction française de Ext, afin d'avoir les message en français

Pour ajouter le fichier de la langue française, il faut ajouter dans ta page html, après l'inclusion des lib ext :

<script type="text/javascript" src="js/ext/locale/ext-lang-fr.js"></script>

Personnellement, j'ai crée un répertoire locale dans lequel je mets uniquement le fichier ext-lang-fr.js.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet