extjs4 MVC Scope Issue

Question

I am trying to call resetCombo method once i click on link from tooltip which is rendered on combo

But i am not able to access it because of scope issue not sure what i am missing. Please help me on this.

   Ext.define('test.BasicForm', {
            extend: 'Ext.form.Panel', 
            renderTo:Ext.getBody(),
            initComponent :function(){
                this.items=[
                {

                    fieldLabel: 'Test',
                    xtype: 'combo',
                    displayField: 'name',
                    width: 320,
                    labelWidth: 130,
                    store: [
                            [1, 'Value 1'],
                            [2, 'Value 2'],
                            [3, 'Value 3'],
                            [4, 'Value 4']
                        ],
                    listeners:{
                    afterrender: function(combo) {
                        Ext.create('Ext.tip.ToolTip', {
                            target: combo.getEl(),
                            autoHide: false,
                            name:'tool-tip',
                            scope:this,
                            html: 'Old value was '+ combo.getValue()+ '<a href="#" onclick="javascript:resetCombo();return false;"> test</a>',

                            listeners: {
                                beforeshow: function() {
                                    return combo.isDirty();
                                }
                            }
                        });
                    }
                    },
                    value:'1'


                }];
                this.callParent(arguments);
                },

             resetCombo:function(){
                 alert('called');
             }



        });

Dexygen · Answer 1 · 2012-09-05T19:51:31.367

1

First this has nothing to do with ExtJS4's MVC features which are generally associated with a controller's control method:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-method-control

Second, you may be able to instead get the effect you want by switching to the following, fully qualified path to reset combo:

onclick="javascript:test.BasicForm.resetCombo();" //etcetera

Lastly, though you may get the above to work, it is far from best practice. I don't have time to give the complete answer, but essentially what you want to do consists of:

Adding a click event handler to the tooltip's underlying Element
Then inside the element use the arguments to Ext.dom.Element.click (see http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-event-click) to ensure it was an <A> tag that got clicked
Then invoke the desired function without having to use Javascript pseudo-URL's and a fully qualified path to the function

Here is my working re-write of the afterrender listener following the above guidelines, with some tweaks to scope, in particular storing a reference to the form in a variable of the same name.

listeners:{
  afterrender: function(combo) {
    var form = this;

    var tooltip = Ext.create('Ext.tip.ToolTip', {
        target: combo.getEl(),
        autoHide: false,
        name:'tool-tip',
        html: 'Old value was '+ combo.getValue()+ ' <a class="tooltipHref" href="#">test</a>',

        listeners: {
        beforeshow: function() {
            return combo.isDirty();
        },
        afterrender: function() {
            tooltip.el.on('click', function(event, element) {
            if (element.className == 'tooltipHref') {
                form.resetCombo();
            }
            });                               
        }
        }
    });
  },
  scope: this
}

edited Sep 05 '12 at 19:51

answered Sep 05 '12 at 18:37

Dexygen

12,287
13
80
147

I tried this but still i am getting the same error. "is not a function" – Elango Sep 05 '12 at 18:43
Actually i am trying to add tooltip dynamically to the combo's in controller. I just posted this as an example to figure it out how to access the method in controller. – Elango Sep 05 '12 at 18:47
Try my suggestions under "Lastly" then – Dexygen Sep 05 '12 at 18:52
I tried adding the render listener How do i achieve the 3rd point? Still not able to make it work 'render' : function() { this.body.on('click', function(header, e) { //Not working //test.BasicForm.resetCombo(); //not working //this.resetCombo(); //Working fine Ext.Msg.alert('Link', 'alert'); }, this, { delegate : 'a' }); } – Elango Sep 05 '12 at 19:13
See latest edit, it works for me. If me or my answer have been helpful please don't forget to up-vote and/or accept the answer. Welcome to SO! – Dexygen Sep 05 '12 at 19:52
Glad to help but be advised (in my opinion anyway) that your application will need to be better organized than this. – Dexygen Sep 06 '12 at 17:05
Don't forget that you can use `Ext.bind` to wrap your function in a "permanent" scope; that is, the function's scope will always be whatever object you set it to regardless of how it is invoked. – Eric Sep 06 '12 at 23:55

score 0 · Answer 2 · answered Sep 05 '12 at 18:35

0

<a href="#" onclick="javascript:resetCombo();return false;"> test</a>

this code is attempting to call a function named resetCombo which is stored inside the top-level object (the window object).

answered Sep 05 '12 at 18:35

Dan O

6,022
2
32
50

extjs4 MVC Scope Issue

2 Answers2

Linked