0

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

但是由于范围问题，我无法访问它，不确定我缺少什么。请帮助我。

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



        });
4

2 回答 2

1

首先，这与 ExtJS4 的 MVC 特性无关，这些特性通常与控制器的控制方法相关联：

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

其次，您可以通过切换到以下完全限定的路径来重置组合来获得所需的效果：

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

最后，尽管您可以使上述方法发挥作用，但这远非最佳实践。我没有时间给出完整的答案，但基本上你想做的包括：

  1. 向工具提示的底层元素添加点击事件处理程序
  2. 然后在元素内部使用 Ext.dom.Element.click 的参数（参见http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-event-click）确保它是一个被点击的 <A> 标签
  3. 然后调用所需的函数，而不必使用 Javascript 伪 URL 和函数的完全限定路径

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

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
}
于 2012-09-05T18:37:02.953 回答
0

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

这段代码试图调用一个名为的函数，该函数resetCombo存储在顶级对象（window对象）中。

于 2012-09-05T18:35:50.840 回答