PDA

View Full Version : Questions about events in Ext Designer



kyrillos52
19 Aug 2010, 12:51 AM
Hello,

I'll arrive to do some windows in ExtDesigner but I would like to know how do you implement events in the .js code.

To give you an example, I'll create a window with a list and 3 buttons "Add", "Modify", "Delete" and I'll like when I click, I'll open a new Window with a form (doing with ExtDesigner too). Can you give a simple example how to do that ?

I'll succeed to do that when I'll change the code in the ui.js script but I'll see in the manual that you must change the .js script and I don't know how to implement events in this script.

Thank you

jarrednicholls
19 Aug 2010, 5:32 AM
Hi kyrilllos52,

The easiest thing to do is to set an "autoRef" identifier for each of your buttons. The autoRef generates a "ref" configuration that will place the reference to your component at the top-level component, automatically generating the proper number of levels in the path specification. To learn more about "ref", read here: http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component&member=ref

Then with a "ref" set on each button, you can do this in the .js file:



MyWindow = Ext.extend(MyWindowUi, {
initComponent: function(){
MyWindow.superclass.initComponent.call(this);

this.addBtn.on('click', this.onAddBtn, this);
this.modifyBtn.on('click', this.onModifyBtn, this);
this.deleteBtn.on('click', this.onDeleteBtn, this);
},

onAddBtn: function(){
var win = new MyAddWindow();
win.show();
},

onModifyBtn: function(){
// modify
},

onDeleteBtn: function(){
// delete
}
});


Hope that helps!

kyrillos52
19 Aug 2010, 7:18 AM
Hi kyrilllos52,

The easiest thing to do is to set an "autoRef" identifier for each of your buttons. The autoRef generates a "ref" configuration that will place the reference to your component at the top-level component, automatically generating the proper number of levels in the path specification. To learn more about "ref", read here: http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component&member=ref

Then with a "ref" set on each button, you can do this in the .js file:



MyWindow = Ext.extend(MyWindowUi, {
initComponent: function(){
MyWindow.superclass.initComponent.call(this);

this.addBtn.on('click', this.onAddBtn, this);
this.modifyBtn.on('click', this.onModifyBtn, this);
this.deleteBtn.on('click', this.onDeleteBtn, this);
},

onAddBtn: function(){
var win = new MyAddWindow();
win.show();
},

onModifyBtn: function(){
// modify
},

onDeleteBtn: function(){
// delete
}
});


Hope that helps!

Thank you for your help, it's help me a lot. But I have another error when I want to open an new window : this.layout.setActiveItem is not a function. Here is my code :



PasserellePanel = Ext.extend(PasserellePanelUi, {
initComponent: function() {
PasserellePanel.superclass.initComponent.call(this);

this.addBtn.on('click', this.onAddBtn, this);
},

onAddBtn: function(){
var win = new PasserelleAddWindow();
win.show();
}
});

jarrednicholls
19 Aug 2010, 7:58 PM
Are you calling this.layout.setActiveItem inside of the Window? or did you set an "activeItem" configuration on the Window, without a layout of "card"? There is something awry in the window, particularly some action or setting that is trying to set the active item of a card/tab layout in a container that is not in a card/tab layout. Ring any bells? you can post all of your window code for me and I'd be able to better tell...the code you posted doesn't give me any clues as to what's wrong in the window.

kyrillos52
19 Aug 2010, 10:06 PM
Are you calling this.layout.setActiveItem inside of the Window? or did you set an "activeItem" configuration on the Window, without a layout of "card"? There is something awry in the window, particularly some action or setting that is trying to set the active item of a card/tab layout in a container that is not in a card/tab layout. Ring any bells? you can post all of your window code for me and I'd be able to better tell...the code you posted doesn't give me any clues as to what's wrong in the window.

Here is my code


PasserelleAddWindowUi = Ext.extend(Ext.Window, {
title: 'Ajouter une passerelle',
width: 598,
height: 548,
padding: '',
initComponent: function() {
this.items = [
{
xtype: 'form',
title: '',
padding: 10,
id: 'addFormPasserelle',
items: [
{
xtype: 'fieldset',
title: 'Information sur la passerelle',
height: 136,
padding: 10,
labelWidth: 150,
items: [
{
xtype: 'textfield',
fieldLabel: 'Nom',
anchor: '100%',
id: 'nomPasserelle'
},
{
xtype: 'textfield',
fieldLabel: 'Adresse Radio',
anchor: '100%',
id: 'AdresseRadioPasserelle'
},
{
xtype: 'combo',
fieldLabel: 'Type',
anchor: '100%',
store: '',
id: 'comboBoxChoixPasserelle'
}
]
},
{
xtype: 'container',
layout: 'card',
activeItem: 0,
id: 'containerConfiguration',
items: [
{
xtype: 'fieldset',
title: 'Configuration de la passerelle Ethernet',
height: 306,
padding: 10,
activeItem: 0,
labelWidth: 150,
id: 'configurationEthernet',
items: [
{
xtype: 'combo',
fieldLabel: 'Configuration',
anchor: '100%',
id: 'comboBoxChoixIP'
},
{
xtype: 'textfield',
fieldLabel: 'IP',
anchor: '100%',
id: 'textFieldIP'
},
{
xtype: 'textfield',
fieldLabel: 'Masque',
anchor: '100%',
id: 'textFieldMask'
},
{
xtype: 'textfield',
fieldLabel: 'Passerelle',
anchor: '100%',
id: 'textFielPasserelle'
},
{
xtype: 'textfield',
fieldLabel: 'DNS',
anchor: '100%',
id: 'textFieldDNS'
}
]
},
{
xtype: 'fieldset',
title: 'Configuration GPRS',
padding: 10,
height: 306,
labelWidth: 150,
id: 'configurationGPRS',
items: [
{
xtype: 'textfield',
fieldLabel: 'APN',
anchor: '100%',
id: 'labelAPN'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro d\'appel',
anchor: '100%',
id: 'labelNumeroAppel'
},
{
xtype: 'textfield',
fieldLabel: 'Code pin',
anchor: '100%',
id: 'labelCodePin'
},
{
xtype: 'textfield',
fieldLabel: 'Login APN',
anchor: '100%',
id: 'labelLoginAPN'
},
{
xtype: 'textfield',
fieldLabel: 'Mot de passe',
anchor: '100%',
id: 'labelPwdAPN'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro autorisé 1',
anchor: '100%',
id: 'labelAllowedPhone1'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro autorisé 2',
anchor: '100%',
id: 'labelAllowedPhone2'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro autorisé 3',
anchor: '100%',
id: 'labelAllowedPhone3'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro autorisé 4',
anchor: '100%',
id: 'labelAllowedPhone4'
},
{
xtype: 'textfield',
fieldLabel: 'Numéro autorisé 5',
anchor: '100%',
id: 'labelAllowedPhone5'
}
]
},
{
xtype: 'fieldset',
title: 'Configuration LEM',
height: 306,
layout: 'absolute',
id: 'labelConfigurationLEM',
items: [
{
xtype: 'label',
text: 'Il n\'y a rien à configurer pour ce type de passerelle',
x: 150,
y: 80
}
]
}
]
},
{
xtype: 'panel',
title: '',
layout: 'absolute',
height: 33,
activeItem: 0,
border: false,
id: 'panelValidation',
items: [
{
xtype: 'button',
text: 'Ajouter',
height: 30,
width: 80,
region: 'center',
x: 140,
y: 0,
id: 'buttonAddPasserelle'
},
{
xtype: 'button',
text: 'Annuler',
x: 340,
y: 0,
width: 80,
height: 30,
id: 'ButtonCancelPasserelle'
}
]
}
]
}
];
PasserelleAddWindowUi.superclass.initComponent.call(this);
}
});


Thank you for your help