PDA

View Full Version : How to use events with Ext Designer ?



kyrillos52
9 Sep 2010, 1:33 AM
Hello,

I'll try to use some events in the Ext JS API with Ext Designer. I'll arrive to use click event but no others events.

For example, I'll try to raise an event when selected item in a combobox change. I think I must use the 'change' event in the API.

Here is my code :


PasserelleWindowAdd = Ext.extend(PasserelleWindowUi, {
initComponent: function() {
PasserelleWindowAdd.superclass.initComponent.call(this);

this.PASSERELLE_ID.setValue(0); //It's working
this.btnOK.setText("Ajouter"); //It's working

this.btnOK.on('click', this.onAddBtn, this); //It's working
this.btnCancel.on('click', this.onCancelBtn, this); //It's working

this.choixPasserelle.on('change', this.onChangeType, this); //It's not working (No error but there is nothing)
},
onAddBtn: function(){
this.formRepeteur.getForm().submit({
method:'POST',
waitTitle:'Connection en cours',
waitMsg:'Envoi des donnees...',
success:function(){
Ext.Msg.alert('Ajout d\'un collecteur de données','Le collecteur de données a été correctement ajouté');
},
failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Echec de l\'ajout du collecteur de données!', obj.errors.reason);
}else{
Ext.Msg.alert('Attention!', 'Identification serveur injoignable : ' + action.response.responseText);
}
}
});
},
onCancelBtn: function(){
this.close();
},
onChangeType: function(newValue, oldValue) {
alert(newValue);

if(newValue == "TB")
{
this.ContainerType.setActiveItem(2);
}
else if(newValue == "WD_GPRS")
{
this.ContainerType.setActiveItem(1);
}
else
{
this.ContainerType.setActiveItem(0);
}
}
});


Can you give me more explanations on how to use events with Ext Designer ?

Thank you,

jarrednicholls
9 Sep 2010, 10:08 AM
Hi kyrillos52,

Your usage of events is precisely correct. You should use the 'select' event, not the 'change' event for the ComboBox. The 'change' event will fire when the input control loses focus, but the 'select' event will fire as soon as the selection in the ComboBox has been made and is different from the original value.

Hope that helps!

kyrillos52
9 Sep 2010, 11:42 PM
Thank you for your response. Unfortunately, I've another problem with onChangeType function.

ContainerType is a container who use card Layout configured by using autoref with ExtDesigner. In the initComponent function, when I use this.ContainerType.setActiveItem(2); Firebug said "this.containerType.setActiveItem is not a function".

Here is my ui.js code :


PasserelleWindowUi = Ext.extend(Ext.Window, {
title: 'Ajouter un collecteur',
width: 598,
height: 548,
initComponent: function() {
this.items = [
{
xtype: 'form',
padding: 10,
url: 'passerelle',
ref: 'formPasserelle',
items: [
{
xtype: 'fieldset',
title: 'Information sur le collecteur',
height: 136,
padding: 10,
labelWidth: 150,
items: [
{
xtype: 'hidden',
fieldLabel: 'Label',
anchor: '100%',
name: 'PASSERELLE_ID',
ref: '../../PASSERELLE_ID'
},
{
xtype: 'textfield',
fieldLabel: 'Nom',
anchor: '100%',
name: 'Passerelle_name',
maxLength: 45,
allowBlank: false,
ref: '../../Passerelle_name'
},
{
xtype: 'combo',
fieldLabel: 'Type',
anchor: '100%',
name: 'Passerelle_type',
store: 'PasserelleTypeStore',
displayField: 'PasserelleTypeName',
valueField: 'PasserelleTypeID',
forceSelection: true,
mode: 'local',
triggerAction: 'all',
ref: '../../choixPasserelle'
}
]
},
{
xtype: 'container',
layout: 'card',
activeItem: 0,
ref: '../ContainerType',
items: [
{
xtype: 'fieldset',
title: 'Configuration de la passerelle Ethernet',
height: 306,
padding: 10,
labelWidth: 150,
layoutConfig: {
labelSeparator: ' '
},
items: [
{
xtype: 'radio',
fieldLabel: 'Configuration',
boxLabel: 'Dynamique',
name: 'Passerelle_Mode',
value: 2,
ref: '../../../Passerelle_Mode1'
},
{
xtype: 'radio',
fieldLabel: '',
boxLabel: 'Statique',
name: 'Passerelle_Mode',
labelSeparator: ' ',
value: 1,
ref: '../../../Passerelle_Mode2'
},
{
xtype: 'textfield',
fieldLabel: 'IP',
anchor: '100%',
name: 'Passerelle_IP',
allowBlank: false,
maxLength: 17,
ref: '../../../Passerelle_IP'
}
]
},
{
xtype: 'fieldset',
title: 'Configuration GPRS',
padding: 10,
height: 306,
labelWidth: 150,
items: [
{
xtype: 'textfield',
fieldLabel: 'APN',
anchor: '100%',
name: 'APN',
maxLength: 15,
ref: '../../../APN'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro d\'appel',
anchor: '100%',
name: 'Numero_appel',
maxLength: 15,
ref: '../../../Numero_appel'
}
]
},
{
xtype: 'fieldset',
title: 'Configuration LEM',
height: 306,
layout: 'absolute',
items: [
{
xtype: 'label',
text: 'Il n\'y a rien à configurer pour ce collecteur',
x: 150,
y: 80
}
]
}
]
},
{
xtype: 'panel',
title: '',
layout: 'absolute',
height: 33,
border: false,
items: [
{
xtype: 'button',
text: 'OK',
height: 30,
width: 80,
region: 'center',
x: 140,
y: 0,
ref: '../../btnOK'
},
{
xtype: 'button',
text: 'Annuler',
x: 340,
y: 0,
width: 80,
height: 30,
ref: '../../btnCancel'
}
]
}
]
}
];
PasserelleWindowUi.superclass.initComponent.call(this);
}
});

jarrednicholls
13 Sep 2010, 7:32 PM
Hi kyrillos52,

setActiveItem is a function of the layout: this.ContainerType.getLayout().setActiveItem()

kyrillos52
14 Sep 2010, 6:28 AM
my code is working now, thank you.