PDA

View Full Version : Ext.Extend and handler scope (this)



DaviBaldin
19 Jul 2009, 6:46 AM
Hi all,

Recently I've found that I can develop using OO with Ext.extend. Amazing !!!

And now I'm refactoring all my code to use it, but I'm getting issues on the code inside handlers. The problem is on the this.getForm():



listeners: {
'fileselected': function (field, path) {
this.getForm().submit({


The problem is: this is referencing the FileUploadField not the class AttachAcceptanceFormPanel which extends FormPanel.

My question is: How to make a reference to the class instance inside methods/handlers?

Full code



/* Package */
Ext.namespace('App');

App.AttachAcceptanceFormPanel = Ext.extend(Ext.FormPanel, {
initComponent: function() {
Ext.apply(this, {
labelWidth: 130,
tbar: this.initToolBar(this),
frame: false,
fileUpload: true,
bodyStyle:'padding:5px 5px 0',
autoHeight: true,
defaults: {width: 230},
defaultType: 'textfield',
items: [{xtype:'fieldset',
title: 'Acceptance information',
collapsible: false,
autoHeight: true,
autoWidth: true,
defaults: {width: 230},
defaultType: 'textfield',
items :[{
xtype: 'fileuploadfield',
id: 'spreadsheet-file',
emptyText: 'Select an Excel spreadsheet .xls file',
fieldLabel: 'Spreadsheet',
name: 'spreadsheetFile',
buttonText: '',
allowBlank: false,
buttonCfg: {
iconCls: 'file-upload'
},
listeners: {
'fileselected': function (field, path) {
this.getForm().submit({
url: '/jnjcit/spreadsheet',
method: 'POST',
waitMsg: 'Validanting your spreadsheet...',
success: function(form, action){
var text = 'Estimated hours: <b>' + action.result.data.estimatedHours + 'hs.</b>';
form.findField('estimatedHours').setValue(text);
},
failure: function(form, action){
var text = 'Estimated hours: <b>0hs.</b>';
form.findField('estimatedHours').setValue(text);
Application.showException(action.result.errors.spreadsheetFile);
}
});
}
}
},{
xtype: 'displayfield',
id: 'estimatedHours',
labelSeparator: '',
value: ' '
},{
fieldLabel: 'Acceptance message',
name: 'acceptanceMessage',
xtype: 'textarea',
allowBlank: true
}]
}]
});
App.AttachAcceptanceFormPanel.superclass.initComponent.call(this);
},

initToolBar: function(panel) {
return [
new Ext.Action({
text: 'Attach acceptance',
iconCls: 'save',
handler: function(){
var f = panel.getForm();
if (f.isValid()) {
f.submit({
url: '/jnjcit/spreadsheet',
method: 'POST',
params: {
attaching: 'true',
ticketId: ticketId
},
success: function(form, action){
Application.showMessage('Acceptance','Acceptance successfully attached.');
window.close();
},
failure: function(form, action){
Application.showException("Exception attaching acceptance");
}
});
}
}
})
];
}
});


Thank you very much !!

Davi

Lukman
19 Jul 2009, 8:14 AM
Add scope: this at the same level with listeners: {}


...
listeners: {
...
},
scope: this,
...

DaviBaldin
19 Jul 2009, 1:59 PM
Hummm, not worked. Firebug says:

this: Object initialConfig=Object xtype=fileuploadfield



buttonCfg: {
iconCls: 'file-upload'
},
scope: this,
listeners: {
'fileselected': function (field, path) {
this.getForm().submit({

DaviBaldin
19 Jul 2009, 2:28 PM
Hey, I've found a workaround....

So, what I did wrong before? Is FileUploadField buggy?



App.AttachAcceptanceFormPanel.superclass.initComponent.call(this);
Ext.getCmp('spreadsheetFile').addListener('fileselected',function (field, path) {
this.getForm().submit({
url: '/jnjcit/spreadsheet',
method: 'POST',
waitMsg: 'Validanting your spreadsheet...',
success: function(form, action){
var text = 'Estimated hours: <b>' + action.result.data.estimatedHours + 'hs.</b>';
form.findField('estimatedHours').setValue(text);
},
failure: function(form, action){
var text = 'Estimated hours: <b>0hs.</b>';
form.findField('estimatedHours').setValue(text);
alert('Has error');
//Application.showException(action.result.errors.spreadsheetFile);
}
});
},this);

mjlecomte
19 Jul 2009, 5:02 PM
I doubt it is buggy, I don't think you recognize what 'this' is when you're using it. There's a couple articles about scope in the wiki, or peruse the net. If you're going to use OO it's best to get a good grasp on scope.

Condor
19 Jul 2009, 9:52 PM
scope is a config option of listeners, not of fileuploadfield:


buttonCfg: {
iconCls: 'file-upload'
},
//scope: this,
listeners: {
fileselected: function (field, path) {
this.getForm().submit({
...
});
},
scope: this
}

Lukman
19 Jul 2009, 10:22 PM
scope is a config option of listeners, not of fileuploadfield:


buttonCfg: {
iconCls: 'file-upload'
},
//scope: this,
listeners: {
fileselected: function (field, path) {
this.getForm().submit({
...
});
},
scope: this
}

My bad. The scope option was for components that use handler (Ext.Button etc).

But would your code work? I think the documented way of configuring custom scope for listeners is as follows:


listeners: {
fileselected: {
fn: function (field, path) {
this.getForm().submit({
...
});
},
scope: this
}
}


Am I wrong this time either?

Condor
19 Jul 2009, 10:26 PM
There are 2 ways to specify a listener scope:

Same scope for all handlers:

listeners: {
event1: handler1,
event2: handler2,
scope: scope
}

Separate scope for every handler:

listeners: {
event1: {
fn: handler1,
scope: scope1
},
event2: {
fn: handler2,
scope: scope2
}
}

ps. You can mix the 2 methods if you need to.

DaviBaldin
20 Jul 2009, 1:52 PM
All,

Thank you so much. I'll try using scope at listener level and I'll update the thread.

=D>

Davi.

DaviBaldin
20 Jul 2009, 1:56 PM
Thank you I've put the scope in the right place.