Results 1 to 10 of 10

Thread: Ext.Extend and handler scope (this)

  1. #1

    Exclamation Ext.Extend and handler scope (this)

    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():

    Code:
    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

    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
    Davi Baldin
    Software Eng.
    Presentia Consultoria e Servios
    Sarbarian Software

  2. #2
    Ext User Lukman's Avatar
    Join Date
    Jun 2009
    Location
    Malaysia
    Posts
    138

    Default

    Add scope: this at the same level with listeners: {}
    Code:
    ...
    listeners: {
       ...
    },
    scope: this,
    ...

  3. #3

    Default

    Hummm, not worked. Firebug says:

    this: Object initialConfig=Object xtype=fileuploadfield

    Code:
     buttonCfg: {
     iconCls: 'file-upload'
     },
     scope: this,
     listeners: {
     'fileselected': function (field, path) {
     this.getForm().submit({
    Davi Baldin
    Software Eng.
    Presentia Consultoria e Servios
    Sarbarian Software

  4. #4

    Default

    Hey, I've found a workaround....

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

    Code:
    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);
    Davi Baldin
    Software Eng.
    Presentia Consultoria e Servios
    Sarbarian Software

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    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.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    scope is a config option of listeners, not of fileuploadfield:

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

  7. #7
    Ext User Lukman's Avatar
    Join Date
    Jun 2009
    Location
    Malaysia
    Posts
    138

    Default

    Quote Originally Posted by Condor View Post
    scope is a config option of listeners, not of fileuploadfield:

    Code:
    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:
    Code:
    listeners: {
       fileselected: {
          fn: function (field, path) {
             this.getForm().submit({
                ...
             });
          },
          scope: this
       }
    }
    Am I wrong this time either?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    There are 2 ways to specify a listener scope:

    Same scope for all handlers:
    Code:
    listeners: {
      event1: handler1,
      event2: handler2,
      scope: scope
    }
    Separate scope for every handler:
    Code:
    listeners: {
      event1: {
        fn: handler1,
        scope: scope1
      },
      event2: {
        fn: handler2,
        scope: scope2
      }
    }
    ps. You can mix the 2 methods if you need to.

  9. #9

    Default

    All,

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



    Davi.
    Davi Baldin
    Software Eng.
    Presentia Consultoria e Servios
    Sarbarian Software

  10. #10

    Thumbs up [Resolved] Ext.Extend and handler scope (this)

    Thank you I've put the scope in the right place.
    Davi Baldin
    Software Eng.
    Presentia Consultoria e Servios
    Sarbarian Software

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •