Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//les champs pour les stores
var fields = [
'name',
'species',{
name:'age',
type:'int'
}
];
//nos données
var data = [
['Luke', 'Humain', 19],
['Ackbar', 'Calamarien', 44],
['Yoda', 'Inconnu', 896]
];
//limites d'âge, pour la validation avancée
var ageLimits = {
'Humain' : 130,
'Calamarien' : 250
//pas de limites pour les autres espèces
};
//exemple basique d'édition sans contrôle des valeurs saisies
var grid1 = new Ext.grid.EditorGridPanel({
title:'Basique',
store : new Ext.data.ArrayStore({
autoLoad:true,
fields:fields,
data:data
}),
autoExpandColumn:'name',
columns : [{
header:'Nom',
dataIndex:'name',
id:'name',
editor:new Ext.form.TextField() //éditeur de texte simple
},{
header:'Espèce',
dataIndex:'species',
editor:new Ext.form.TextField()
},{
header:'Âge',
dataIndex:'age',
editor:new Ext.form.NumberField() //éditeur de nombres (saisie de symboles numériques uniquement)
}]
});
//Validation de données a priori
var grid2 = new Ext.grid.EditorGridPanel({
title:'Contrôle a priori',
store : new Ext.data.ArrayStore({
autoLoad:true,
fields:fields,
data:data
}),
autoExpandColumn:'name',
columns : [{
header:'Nom',
dataIndex:'name',
id:'name',
editor:new Ext.form.TextField({
vtype:'alpha' //seulement des lettres, désolé R2D2 et C3PO
})
},{
header:'Espèce',
dataIndex:'species',
editor:new Ext.form.TextField() //rien de spécial
},{
header:'Âge',
dataIndex:'age',
editor:new Ext.form.TextField({
maskRe : /\d+/ //unique des chiffres (pour ça, il y a NumberField...)
})
}]
});
//contrôle des valeurs pendant la saisie
var grid3 = new Ext.grid.EditorGridPanel({
title:'Contrôle pendant la saisie',
store : new Ext.data.ArrayStore({
autoLoad:true,
fields:fields,
data:data
}),
autoExpandColumn:'name',
columns : [{
header:'Nom',
dataIndex:'name',
id:'name',
editor:new Ext.form.TextField({
maxLength:8, //le champ est limité à 8 caractères
maxLengthText:'Nom trop long...' //message d'erreur à afficher en cas de dépassement
})
},{
header:'Espèce',
dataIndex:'species',
editor:new Ext.form.TextField({
regex:/[A-Z][a-z]*/, //première lettre en majuscules, que des lettres minuscules
regexText:'Et les majuscules ?'//message d'erreur à afficher en cas de non correspondance
})
},{
header:'Âge',
dataIndex:'age',
editor:new Ext.form.NumberField({
maxValue: 100, //valeur maximale pour l'âge
maxText : 'Un peu vieux, non ?' //message d'erreur à afficher en cas de dépassement
})
}]
});
//contrôle des valeurs après la saisie
var grid4 = new Ext.grid.EditorGridPanel({
title:'Contrôle a posteriori',
store : new Ext.data.ArrayStore({
autoLoad:true,
fields:fields,
data:data
}),
autoExpandColumn:'name',
columns : [{
header:'Nom',
dataIndex:'name',
id:'name',
editor:new Ext.form.TextField()
},{
header:'Espèce',
dataIndex:'species',
editor:new Ext.form.TextField()
},{
header:'Âge',
dataIndex:'age',
editor:new Ext.form.NumberField()
}],
listeners:{
'validateedit':function(){
return false; //toujours faux, on refuse tout changement (pas très utile...)
}
}
});
//exemple d'accès au record courant par le validator
var grid5 = new Ext.grid.EditorGridPanel({
title:'Accès au record',
store : new Ext.data.ArrayStore({
autoLoad:true,
fields:fields,
data:data
}),
autoExpandColumn:'name',
columns : [{
header:'Nom',
dataIndex:'name',
id:'name'
},{
header:'Espèce',
dataIndex:'species'
},{
header:'Âge',
dataIndex:'age',
editor:new Ext.form.NumberField({
validator:function(value){
//currentRecord existe grâce au listener beforeedit
var record = this.currentRecord;
var species = record.get('species');
var limit = ageLimits[species];
if(limit){
//on renvoie un message d'erreur en fonction du record !
return (value < limit) || "Trop vieux pour un " + species + " !";
}else{
return true;
}
}
})
}],
listeners:{
'beforeedit' : function(data){
//on récupère le ColumnModel de la grid
var cm = data.grid.getColumnModel();
//on récupère la colonne en cours d'édition
var col = cm.config[data.column];
//on inject le record comme propriété de l'éditor
col.editor.currentRecord = data.record
}
}
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS EditorGrid demos</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="globals.js"></script>
<script type="text/javascript" src="grid1.js"></script>
<script type="text/javascript" src="grid2.js"></script>
<script type="text/javascript" src="grid3.js"></script>
<script type="text/javascript" src="grid4.js"></script>
<script type="text/javascript" src="grid5.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//nécessaire pour l'affichage des erreurs
new Ext.TabPanel({
renderTo:Ext.getBody(),
width:600,
height:200,
activeTab:0,
items:[
grid1,
grid2,
grid3,
grid4,
grid5
]
});
});
</script>
</head>
<body>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11278638-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
@alexkhuoy

This comment has been minimized.

Show comment
Hide comment
@alexkhuoy

alexkhuoy Feb 7, 2017

Bonjour,

Tout d'abord merci pour ce tuto qui va m'être bien utile. J'essaie de faire une validation des données dans un champs qui peut avoir deux formats différents et reformater le champs dans l'un des deux cas.
Par contre, je ne suis pas familier de la syntaxe js et je ne comprend cette partie de code dans le grid5.js:

            var limit = ageLimits[species];
            if(limit){
                //on renvoie un message d'erreur en fonction du record !
                return (value < limit) || "Trop vieux pour un " + species + " !";
            }else{
                return true;

}
En gros on assignes l'age limite si il y en a un et la variable devient implicitement un booleen?
Et ne serait-ce pas plutot return (value > limit)?
Pardon d'avance si c'est une question bête :p

alexkhuoy commented Feb 7, 2017

Bonjour,

Tout d'abord merci pour ce tuto qui va m'être bien utile. J'essaie de faire une validation des données dans un champs qui peut avoir deux formats différents et reformater le champs dans l'un des deux cas.
Par contre, je ne suis pas familier de la syntaxe js et je ne comprend cette partie de code dans le grid5.js:

            var limit = ageLimits[species];
            if(limit){
                //on renvoie un message d'erreur en fonction du record !
                return (value < limit) || "Trop vieux pour un " + species + " !";
            }else{
                return true;

}
En gros on assignes l'age limite si il y en a un et la variable devient implicitement un booleen?
Et ne serait-ce pas plutot return (value > limit)?
Pardon d'avance si c'est une question bête :p

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment