extjs4 MVC范围问题 [英] extjs4 MVC Scope Issue

问题描述

一旦我单击组合显示的工具提示中的链接，我就尝试调用resetCombo方法

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



        });

推荐答案

首先，这与ExtJS4的MVC功能无关，这些功能通常与控制器的控制方法相关联:

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:

1. 在工具提示的基础元素中添加click事件处理程序
2. 然后在元素内部使用Ext.dom.Element.click的参数(请参见

1. Adding a click event handler to the tooltip's underlying Element
2. 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
3. Then invoke the desired function without having to use Javascript pseudo-URL's and a fully qualified path to the function

这是我按照上述准则对Afterrender侦听器进行的工作重写，其中对范围进行了一些调整，特别是将对表单的引用存储在同名变量中.

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
}

这篇关于extjs4 MVC范围问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！