如何從彈出窗口在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方法即可。