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 と関数への完全修飾パスを使用せずに、目的の関数を呼び出します。

これは、上記のガイドラインに従ってアフターレンダー リスナーを書き直したものです。特に、フォームへの参照を同じ名前の変数に格納するなど、スコープを微調整しています。

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 に答える