如何从弹出窗口在ExtJS 4

Question

在Viewport中获取对基本组件的引用我很努力地获取引用，而不是使用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(); 


    } 

}); 

Answer 1

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方法即可。