extjs4 MVC Scope Issue | 易学教程

问题

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');
             }



        });

回答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
}

回答2:

<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).

来源：https://stackoverflow.com/questions/12287575/extjs4-mvc-scope-issue

标签

scope

extjs4

extjs-mvc