PDA

View Full Version : Mutiselect field in a form within a window



senacle
18 Oct 2010, 1:43 AM
Hi !

I've a multiselect field in a form.
The form is within a window.
As you can see in the attached files, the displaying of the multiselect isn't the same with different browsers.

Here's the code of the form :



var form_abonnement = new Ext.FormPanel ({
bodyStyle:'padding:5px 5px 0',
border: false,
buttonAlign: 'center',
buttons: [{
cls: 'button',
formBind: true,
handler: function () {
var form_abonnement = Ext.getCmp('idjs_abonnement_form').getForm();
if (form_abonnement.isValid()) {
form_abonnement.submit({
waitMsg: 'Enregistrement en cours...',
success: function (result, action) {
obj = Ext.decode(action.response.responseText);
var message = obj.message;
Ext.Msg.show({
title: 'Information',
msg: message,
closable: false,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
},
failure: function(result, action) {
obj = Ext.decode(action.response.responseText);
var message = obj.errors;
Ext.Msg.show({
title: 'Information',
msg: message,
closable: false,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
});
} else {
Ext.Msg.show({
title: 'Erreur',
msg: 'Veuillez remplir les champs obligatoires !',
closable: false,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
},
iconCls: 'icon-save',
id: 'idjs_abonnement_envoyer',
scale: 'medium',
text: 'Enregistrer'
}, {
cls: 'button',
formBind: true,
handler: function() {
Ext.getCmp('idjs_abonnement_form').form.reset();
},
iconCls: 'icon-erase',
scale: 'medium',
text: 'Effacer'
}, {
cls: 'button',
formBind: true,
handler: function() {
Ext.getCmp('idjs_fenetre_abonnement').hide();
},
iconCls: 'icon-ferme',
scale: 'medium',
text: 'Fermer la fenętre'
}],
height: 500,
id: 'idjs_abonnement_form',
items: [{
border: false,
layout: 'column',
items:[{
border: false,
columnWidth:.45,
defaults: {labelStyle: 'font-weight:bold; color:#990033;'},
layout: 'form',
items: [{
allowBlank: false,
columns: 1,
id: 'idjs_abonnement_form_abonnement',
items: [
{boxLabel: 'S\'abonner', name: 'abonnement', inputValue: 'abonnement'},
{boxLabel: 'Se désabonner', name: 'abonnement', inputValue: 'desabonnement'},
{boxLabel: 'Modifier l\'abonnement', name: 'abonnement', inputValue: 'modifier'}
],
width: 216,
xtype: 'radiogroup'
},{
allowBlank: false,
enableKeyEvents: true,
fieldLabel: 'Nom ',
id: 'idjs_abonnement_form_nom',
listeners: {
keyup : function(field, event) {
nom = this.getValue().toLowerCase();
prenom = Ext.getCmp('idjs_abonnement_form_prenom').getValue().toLowerCase();
Ext.getCmp('idjs_abonnement_form_courriel').setValue(prenom + '.' + nom + '@');
}
},
name: 'abonnement_nom',
regex : RegExp('^[a-zA-Z]+$'),
regexText : 'Nom incorrect',
width: 216,
xtype: 'textfield'
},{
allowBlank: false,
enableKeyEvents: true,
fieldLabel: 'Prénom ',
id: 'idjs_abonnement_form_prenom',
listeners: {
keyup : function(field, event) {
nom = Ext.getCmp('idjs_abonnement_form_nom').getValue().toLowerCase();
prenom = this.getValue().toLowerCase();
Ext.getCmp('idjs_abonnement_form_courriel').setValue(prenom + '.' + nom + '@');
}
},
name: 'abonnement_prenom',
regex : RegExp('^[a-zA-Zéčôď]+$'),
regexText : 'Prénom incorrect',
width: 216,
xtype: 'textfield'
},{
allowBlank: false,
fieldLabel: 'Courriel ',
id: 'idjs_abonnement_form_courriel',
name: 'abonnement_courriel',
vtype: 'verif_courriel',
width: 216,
xtype: 'textfield'
},{
allowBlank: true,
fieldLabel: 'Tél. Portable ',
id: 'idjs_abonnement_form_telelphone',
name: 'abonnement_telephone',
vtype: 'verif_telephone_portable',
width: 216,
xtype: 'textfield'
},{
allowBlank: false,
displayField: 'nom_service',
editable: false,
fieldLabel: 'Service ',
id: 'idjs_abonnement_form_service',
lastQuery: '',
name: 'abonnement_service',
store: 'store_service',
triggerAction: 'all',
valueField: 'id_service',
width: 216,
xtype: 'combo'
},{
fieldLabel: 'Code postal ',
id: 'idjs_abonnement_code_postal',
listeners: {
blur: function(field) {
Ext.getCmp('idjs_abonnement_ville').store.removeAll();
code_postal = this.getValue();
Ext.getCmp('idjs_abonnement_ville').store.load({
callback: function(r, option, success) {
if (!success) {
Ext.Msg.show({
title: 'Information',
msg: 'Il n\'y a pas de ville avec le code postal ' + code_postal,
closable: false,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
},
params: {abonnement_code_postal: this.getValue()}
});
}
},
name : 'abonnement_code_postal',
regex : RegExp('^[0-9]{5}$'),
regexText : 'Ce code postal n\'est pas correct',
width: 50,
xtype : 'numberfield'
}, {
displayField: 'nom_ville',
editable: false,
emptyText:'Entrer un code postal...',
fieldLabel: 'Ville ',
id: 'idjs_abonnement_ville',
lastQuery: '',
name : 'abonnement_ville',
store: 'store_ville',
triggerAction: 'all',
valueField: 'id_ville',
xtype : 'combo'
}]
},{
border: false,
columnWidth:.55,
defaults: {labelStyle: 'font-weight:bold; color:#990033;'},
layout: 'form',
items: [{
allowBlank: false,
displayField: 'display_categorie',
fieldLabel: 'Application/service ',
id: 'idjs_abonnement_id_categorie',
height: 300,
listeners: {
render: function(ms) {
new Ext.ux.DataTip({
tpl: '{description_categorie}'
}).init(ms.view);
}
},
name: 'abonnement_id_categorie',
store: info_categorie,
tbar:[{
text: 'Tout sélectionner',
handler: function(){
Ext.getCmp('idjs_abonnement_form').getForm().findField('abonnement_id_categorie').selectAll();
}
}, {
text: 'Tout désélectionner',
handler: function(){
Ext.getCmp('idjs_abonnement_form').getForm().findField('abonnement_id_categorie').reset();
}
}
],
valueField: 'value_categorie',
width: 250,
xtype: 'multiselect'
}]
}]
}],
labelWidth: 130,
plugins: new Ext.ux.DataTip({
anchor: 'top',
anchorOffset: 85
}),
url: 'htdocs/Admin/abonnement.php'
});



and the code of the window :



var fenetre_abonnement = new Ext.Window({
animateTarget: 'idjs_checkbox_abonnement',
autoHeight: true,
border: true,
closable: true,
closeAction: 'hide',
hidden: true,
iconCls: 'icon-courrier',
id: 'idjs_fenetre_abonnement',
items:[
form_abonnement
],
listeners: {
hide: function() {
updateSpot(false);
Ext.getCmp('idjs_checkbox_abonnement').setValue(false);
}
},
resizable: false,
shadow: 'drop',
shadowOffset: 10,
title: 'Abonnement aux informations',
width: 850
});



I've tried to change the form's height, the multiselect's height, but no change.

senacle
29 Dec 2010, 4:14 AM
Go to http://www.sencha.com/forum/showthread.php?118601-Ext3.3-Multiselect-in-form-in-window