0

Ext.getCmp(..) を使用せずに参照を取得するのに苦労しています。Ext.getCmp を実稼働アプリで使用しないことが最善である理由を理解しています。これは主に、重複した DOM ID に関する混乱の可能性があるためです。以下に基本的なサンプルを作成しましたが、その中にいくつかのコメントを入れました.

また、このトピックに関する非常に優れた説明やチュートリアルなども探しています。ComponentQuery を実行する方法を学ぶのが最善だと思いますが、そうであるかどうかさえわかりません。したがって、これ以上の言葉はありませんが、ここにコードがあります。私が理解したいことについては、ポップアップウィンドウのボタンイベントをご覧ください。

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'panel',
                flex: 2,
                region: 'center',
                title: 'My Panel',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        xtype: 'button',
                        text: 'MyButton',
                        listeners: {
                            click: {
                                fn: me.onButtonClick,
                                scope: me
                            }
                        }
                    }]
                }],
                items: [{
                    xtype: 'component',
                    html: '<b>my component</b>'
                }]
            }]
        });

        me.callParent(arguments);
    },

    onButtonClick: function (button, e, eOpts) {

        Ext.define('MyApp.view.MyWindow', {
            extend: 'Ext.window.Window',

            height: 250,
            width: 400,
            title: 'My Window',

            initComponent: function () {
                var me = this;

                Ext.applyIf(me, {
                    items: [{
                        xtype: 'button',
                        text: 'Want to get link to my component in window that opened this',
                        listeners: {
                            click: {
                                fn: me.onButtonClick,
                                scope: me
                            }
                        }
                    }]
                });

                me.callParent(arguments);
            },

            onButtonClick: function (button, e, eOpts) {

                // I would like to set the html property of the 
                //   component in the window below
                //   I would like to do this efficintly
                //   user itemId?
                //   use componentquery?
                //   use up/down/etc.
                //   
                //   Need help with componentquery, extjs help is not helpful for me
                //   I need more basics I think.


                this.up('panel').up('panel').down('component').html = '<i>set from button</i>';
                console.log(this.up('panel').up('panel').down('component'));
            }

        });

        var win = Ext.create('MyApp1.view.MyWindow', {});
        win.show();


    }

});
4

1 に答える 1

4

ウィンドウがフローティングしているためup、ビューポートに戻ることができません。同様に、downビューポートで を使用して、ウィンドウ内のコンポーネントを見つけることはできません。外部onButtonClickメソッドは、ビューポートのスコープで呼び出されます。thisその時点でへの参照を保存すると、それを使用しdownてコンポーネントを取得できます。

onButtonClick: function() {
    var viewport = this;

    Ext.define('YourWindow', {
       // setup everything
       onButtonClick: function() {
           // this may not return what you want since everything
           // else inside the viewport is technically also a component
           // You'd be better off adding an itemId to the component
           // you wish to grab and using that in the call to down.
           console.log(viewport.down('component'));
       }
    });

    // show window
}

余談ですが、ボタンのクリック時にウィンドウ クラスを定義するかどうかはわかりません。ボタンが 1 回だけクリックされることを保証できない場合は、別の場所でクラスを定義し、クリック ハンドラーでウィンドウを作成する必要があります。ビューポートへの参照を取得するのは複雑ですが、作成時にウィンドウのプロパティとして簡単に設定するか、ウィンドウの構成オブジェクトに onButtonClick メソッドを追加するだけです。

于 2013-03-15T15:38:20.493 に答える