ExtJS如何覆蓋onRender，以便我可以得到正確的組件？

我想獲得作爲組件呈現的div的大小。ExtJS如何覆蓋onRender，以便我可以得到正確的組件？

Ext.define('EDS.view.selector.Container', { 
    extend: 'Ext.panel.Panel', 
    alias : 'widget.selectorcontainer', 

    layout: 'fit', 

    initComponent: function(){ 

     this.items = [ 
       { 
        xtype: 'tabpanel', 
        defaults: { 
         bodyPadding: 10 
        }, 
        layout: 'fit', 
        items:[ 
         { 
          title: 'Organization', 
          id: 'selector-organization', 
          tag: 'div',        
          html: 'div here', 
          height: '100%', 

          onRender: function(){ 

           //// Render D3 
           // Selector 
           console.log("onRender"); 
           console.log(this.height); 
           console.log(this.width); 

           var divId = Ext.getCmp('selector-organization').id + "-body"; 
           var divHeight = Ext.get(divId).getHeight(); 
           var divWidth = Ext.get(divId).getWidth(); 
           console.log(divHeight); 
           console.log(divWidth); 
           renderSelectorOrgView(divId, divHeight, divWidth); 

           this.callParent(); 
          }, 
...... 
......

而這個onRender函數會中斷正常的渲染過程。整個佈局遭到破壞，div（＃selector-organization-body）非常小。所以我想知道我是否以錯誤的方式重寫了onRender。

來源

2013-08-20 SolessChong

確實，這是壞的。問題是callParent和此類方法僅適用於已通過Ext.define的方法。

您可以通過調用帶有當前作用域和參數的父方法來模擬callParent。在你的情況下，更換this.callParent()這條線（其中缺少論據，順便說一句）：

Ext.panel.Panel.prototype.onRender.apply(this, arguments);

來源

2013-08-20 09:42:48 rixo

這太強硬。我認爲組件渲染後必須有一種優雅的方式來調用js函數。 – SolessChong

你說得對，但這不是你在這裏問過的問題。重寫不是這裏最好的解決方案，你應該在'afterrender'事件中使用一個監聽器。有關示例，請參閱我在[其他問題]（http://stackoverflow.com/a/18331713/1387519）中發佈的鏈接。 – rixo

如果你希望覆蓋所有面板的OnRender將功能做到這一點：

Ext.override(Ext.tab.Panel, { 
    onRender: function() { 
     this.callParent(); 

     console.log('do something'); 
    } 
});

來源

2013-08-20 15:47:24 Niklas

ExtJS如何覆蓋onRender，以便我可以得到正確的組件？

回答

相關問題