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

Windows 是浮动的，因此您无法使用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
}

附带说明一下，我不确定您是否要在单击按钮时定义窗口类。除非您可以保证该按钮只会被单击一次，否则您应该在其他地方定义您的类并在单击处理程序中创建窗口。这会使获取对视口的引用变得复杂，但是您可以在创建它时轻松地将其设置为窗口的属性，或者只需在窗口的配置对象中添加 onButtonClick 方法。

于 2013-03-15T15:38:20.493 回答