Ext.form
Ext.form, ça va la form ? Euh oui mais en forme de quoi ? ok ->[]. <mp3>Rimshot.mp3</mp3>
Ext.FormPanel
Ze formulaire concon
Exemple tout concon avec un champ texte, une checkbox et deux boutons :
<source lang="javascript"> var formc= new Ext.FormPanel({
id: 'mon_formulaire', name: 'mon_formulaire'
,title: "La mère de Toto a 3 fils : "
,items: [{ xtype: 'textfield', fieldLabel: 'Riri', name: 'Riri' },
{ xtype: 'checkbox', fieldLabel: 'Fifi', name: 'Fifi' } ]
,buttons: [{ text: "Loulou", handler: function() { alert('perdu'); } },
{ text: "Toto", handler: function() { alert('gogné'); } }]
}); // ajout a la fin du DOM formc.render(document.body); </source> Le formulaire sera ajouté à la fin du corps de la page html (.render(document.body)).
Pareil mais Ext.FormPanel rendu dans un div
Vous kiffez le DOM ? Vous aimez les nœuds ? En voici un : <source lang="xml">
</source>
On rajoute juste la propriété renderTo dans le FormPanel d'avant avec comme valeur l'id du div (ici intelligemment nommé "toto_story").
<source lang="javascript"> var formc= new Ext.FormPanel({
id: 'mon_formulaire', name: 'mon_formulaire'
,title: "La mère de Toto a 3 fils : "
,renderTo: 'toto_story'
,items: [{ xtype: 'textfield', fieldLabel: 'Riri', name: 'Riri' },
{ xtype: 'checkbox', fieldLabel: 'Fifi', name: 'Fifi' } ]
,buttons: [{ text: "Loulou", handler: function() { alert('perdu'); } },
{ text: "Toto", handler: function() { alert('gogné'); } }]
}); // par contre c'est plus render mais doLayout() formc.doLayout(); </source> .doLayout() force la regeneration de l'objet (utile si votre FormPanel est dynamique). N'oubliez de faire après que le DOM soit chargé (Ext.onReady)
oui, mais je veux un fenêtre flottante
Ben faut mettre ton formulaire comme item d'une fenêtre flottante (Ext.window et pas widow, ça veut dire veuve, aucun rapport) car item plus que tu ne le crois. <mp3>Rimshot.mp3</mp3>
Faudra faire un truc dans le genre :
<source lang="javascript">
winFlottante.add(formc);
</source>
Exemple (il faut toujours le div plus haut) : <source lang="xml">
</source> Le Js :
<source lang="javascript"> if (!win) { var formc = new Ext.FormPanel( { id : 'mon_formulaire', name : 'mon_formulaire', width : '400px', height : '180px', title : "La mère de Toto a 3 fils : ", items : [ { xtype : 'textfield', fieldLabel : 'Riri', name : 'Riri' }, { xtype : 'checkbox', fieldLabel : 'Fifi', name : 'Fifi' } ], buttons : [ { text : "Loulou", handler : function() { alert('perdu'); } }, { text : "Toto", handler : function() { alert('gogné'); } } ] }); win = new Ext.Window( { applyTo : 'toto_story', layout : 'fit', width : 400, height : 250, closeAction : 'hide', plain : true, items : [ formc ], buttons : [ { text : 'Submit', disabled : true }, { text : 'Close', handler : function() { win.hide(); } } ] }); } // c'est plus render(), c'est plus doLayout(), c'est show() win.show(); </source> Z'avez vu ? Le applyTo a sauté du FormPanel vers Ext.Window.
Ext.form.TextField
Tooltip / infobulle
Logiquement un textfield devrait avoir une config tooltip: ou qtip: etc. Eh bien non, c'est réservé à la validation pour afficher les message d'erreur. Il faut alors templater : <source lang="javascript"> var sInfoBulle= 'Les mots doux'; ... { xtype: 'textfield'
,name:'mots_doux'
,id:'mots_doux'
,fieldLabel: 'Mots doux'
,value: 'saisissez ici vos mots doux'
} </source>
Et la classe CSS .infobulle : <source lang="css"> .infobulle { background:url('../images/icons/coeur.png') transparent no-repeat scroll 0 0; padding: 0 0 0 18; } </source>
ou renderer :
<source lang="javascript"> var sInfoBulle= 'Les mots doux'; ... { xtype: 'textfield'
,name:'mots_doux'
,id:'mots_doux'
,fieldLabel: 'Mots doux'
,value: 'saisissez ici vos mots doux'
,listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: sInfoBulle
});
}
}
} </source>
ComboBox
Un(e) ComboBox est un champ Input qui peut se remplir dynamiquement(xhr) en un html Select-options modifiable(ou pas) des que l'on saisit des caractères.
Auto suggestion/completion
Le store Json à distance(HttpProxy) : <source lang="javascript"> Ext.onReady(function(){
var myBigTimeout = 90000; // 90 sec
var recStore= new Ext.data.JsonStore({
fields: ['id', 'my_value', 'my_name'],
proxy: new Ext.data.HttpProxy({ url: 'recGridData.php',
timeout: myBigTimeout }),
baseParams : {
action: 'read',
}
});
</source>
recGridData.php renvoi un tableau JSON : <source lang="javascript"> [
{
"id": 666,
"my_name": "evilwebsite",
"my_value": "google.com",
},
{
"id": 1337,
"my_name": "coolwebsite",
"my_value": "bricosoft.com",
}
] </source>
Et l'objet ComboBox : <source lang="javascript">
var comboWithTooltip = new Ext.form.ComboBox({
tpl: '<tpl for=".">
</tpl>',
hiddenName:'my_input', hiddenId:'my_input_hidden1337', // unique and 1337 id mode: 'remote', valueField:'my_value', // col defined in the store and returned by the recGridData.php store: recStore,
displayField:'my_name', // col defined in the store and returned by the recGridData.php
typeAhead: true,
autocomplete: true,
triggerAction: 'all',
emptyText:'...',
minChars: 2, // 2 chars avant de declencher le xhr
selectOnFocus:true,
// lastQuery: ,
applyTo: 'my_input_id' // use renderTo: for a div, applyTo: for an input
,value: "bricosoft.com" // cette option sera pre-selected
});
</source>
qui s'applique à cet Input : <source lang="html4strict"> <form action="...> <input class="input1" name="my_input" id="my_input_id" /> </form> </source>
problèmes / issues
largeur options combobox tronquées / combobox list of values truncated
Pour les soucis de largeur d'options qui vous posent des problèmes, il y a ListWidth :
Par exemple, vous avez mis une combobox dans un fieldset collapsé par défaut. Ben comme il est pas rendu, la largeur des options du combo c'est du n'importe quoi.
Une solution est d'utiliser listWidth : <source lang="javascript">
var maComboboxAmoi = new Ext.form.ComboBox({
...
listWidth: 'auto'
});
var myForm= new Ext.FormPanel({
renderTo: 'my_form', labelWidth: '20', bodyStyle:'border: 0px', floating: false, waitTitle:'Connexion', waitMsg:'Envoi ...', items: [ { xtype: 'fieldset',id: 'my_fieldset', title: 'Zeb, c\'est pas vrai', collapsible: true, collapsed: true, autoHeight: true, labelStyle: 'font-weight: normal', style: 'padding:0;margin-bottom:0', items :[ maComboboxAmoi, unAutreTruc, buttonEnregistrer, buttonAlaCon ] } ]
}); // fin formPanel
</source> Avec listWidth dans la définition du combobox tout rentre dans l'ordre.
L'autre solution est de collapser le fieldset après rendu : <source lang="javascript"> Ext.onReady(function(){
...
Ext.getCmp('my_fieldset').collapse();
</source>
Ext.MessageBox
Ext.MessageBox.confirm
C'est comme confirm() du js mais en plus bizarre :
Exemple avec une requête Ajax : <source lang="javascript"> Ext.MessageBox.confirm('titre dans barre de titre', "Connais-tu l'histoire du con qui dit non ?", function (btn) { if ('yes' == btn) { Ext.Ajax.request({ url : 'http://conar.fr/?conQuiDitNon=coucou',
method: 'POST', params : { reponse : 'oui' },
success: function ( result, request ) { Ext.MessageBox.alert('Bien', 'Tes une flèche toi.'); }, failure: function ( result, request) { Ext.MessageBox.alert('Aie', 'Ya une c*uille dans le paté'); } }); } else { Ext.MessageBox.alert('LOL', "C'est twa !!!"); } }); </source>
Autre exemple avec une combobox, qui appelle le confirm lorsqu'on choisit une option <source lang="javascript">
function formcSubmit(btn) {
if ('yes' == btn) { formc.getForm().submit({ url: 'controller/action', waitMsg: 'Saving...', success: function(f, a) { Ext.Msg.alert('Success', 'OK'); }, failure: function(f, a) { Ext.Msg.alert('Warning', 'KO'); } }); } else { return false; } };
// la combobox est là :
var elExt= new Ext.form.ComboBox({
,mode: 'local' ,store: recStore ,listeners:{ 'select': function(combo, value) { Ext.MessageBox.confirm('Sauvegarder', 'Sauvegarder ou non ?', formcSubmit); } } ,value: 0 // valeur par defaut }); </source>
Ext.MessageBox.confirm avec callback + parametre
En bon céfran : une boîte de dialogue avec fonction de rappel et paramètre.
Cet exemple envoie à l'url mentionnée la variable action contenant "envoi_du_bois". <source lang="javascript">
function monCallback(btn) {
if ('yes' == btn) { //console.info(this.id); return false; monFormulaireAilleurs.getForm().submit({ waitMsg:'Envoi ...', params: {action: this.id}, url: 'http://conar.fr', success: function(form, action) { Ext.Msg.alert("Succes", action.result.message); }, failure: function(form, action) {
Ext.Msg.alert("Echec", action.result.message);
} }); } else { return false; } };
var buttonEnvoi= new Ext.Button({ id: 'envoi_du_bois', text: 'Envoyer' ,handler : function(){ Ext.MessageBox.confirm('Envoyer', 'Confirmez ?', monCallback, this); } }); </source>
Le buttonEnvoi sera dans buttons: de ton formulaire ou dans items:.
Il y a plus élégant(sic) et surtout bien planqué dans la doc, c'est createDelegate (créer délégué, logique(resic)...) : <source lang="javascript">
function monCallback(btn, myId) {
if ('yes' == btn) { //console.info(this.id); return false; monFormulaireAilleurs.getForm().submit({ waitMsg:'Envoi ...', params: {action: myId}, url: 'http://conar.fr', success: function(form, action) { Ext.Msg.alert("Succes", action.result.message); }, failure: function(form, action) {
Ext.Msg.alert("Echec", action.result.message);
} }); } else { return false; } };
var buttonEnvoi= new Ext.Button({ id: 'envoi_du_bois', text: 'Envoyer' ,handler : function(){ Ext.MessageBox.confirm( 'Envoyer', 'Confirmez ?', monCallback.createDelegate(this, [this.id], true) ); }
,scope : this
}); </source>
Ext.form.FieldSet
Le FieldSet est souvent utilisé dans un formulaire pour grouper des élements.
Voici un exemple de fieldset dans un formulaire dans une popup :
<source lang="javascript"> var formBlag = new Ext.form.FormPanel({ id: 'blague',name: 'blague' ,items: [ { xtype:'fieldset' // champ collapsable avec checkbox
,id: 'blague_carambar', name: 'blague_carambar'
,checkboxToggle:true ,title: 'Comment appelle t\'on un garçon avec une baguette de pain sous le bras ?' ,autoHeight:true ,defaults: {width: 210} ,collapsed: true ,items :[{ xtype: 'textarea' ,fieldLabel: 'Réponse' ,name: 'reponse' ,value: 'Un agenda.\nC\'est un petit qu\'a le pain (calepin)' }] // a l'expand on degrise 'OK' ,listeners:{ expand:function(c) { Ext.getCmp('bouton_ok').setDisabled( false ); } } //listeners } ] ,buttons: [ { text: 'hénaurme !!! XD', id: 'bouton_ok' ,disabled: true ,handler: function() { Ext.getCmp('blague').getForm().submit({ url : '/blagues.php', method: 'POST' ,success: function ( result, request ) { Ext.MessageBox.alert('OK', result.responseText); }, failure: function ( result, request) { Ext.MessageBox.alert('KO', result.responseText); } }); //submit } } ,{ text: ':-(', handler: function() {} } ] });
var winAc= new Ext.Window({ title: 'blague', collapsible: true, minimizable : true, resizable: true, width : 485, height : 'auto', closeAction : 'hide', items: [formBlag] }); </source> Lorsque l'on clique sur la checkbox ça dégrise(setDisabled(false)) le bouton ok.
Ext.ux.Toast
Des to-oost, toyo, toyoyo, TOYOS, des tartines grillées quoi. <source lang="javascript"> Ext.ux.Toast.msg('Information', 'plop'); </source>