Extjs + D3：渲染冲突 [英] Extjs + D3: render conflict

问题描述

一般来说，ExtJS渲染整个页面的主框架，D3渲染动态渲染

由于Extjs中的渲染逻辑非常复杂，我把D3渲染逻辑的地方看起来至关重要。

这里我试过两个：

1）放入'initComponent'

  [ExtJS] 
 Ext.define（'EDS.view.selector.Container'，{
 extend：'Ext.panel.Panel'，
 alias：'widget.selectorcontainer'，
 
 initComponent：function（）{
 renderSelectorOrgView（）; 
} 
} 
 $ b b [D3] 
 function renderSelectorOrgView（divId，divHeight，divWidth）{
 var svg = d3.select（＃+ divId）.append（svg）; 
 ... 。
} 
  

问题是它只是不工作，因为在initComponent ，

这转向了D3只能选择空结果。我认为原因类似于1）

3）放入onRender（）

好的。事实上，D3可以得到div和它的attr完美。然而问题是，ExtJS渲染过程完全被这个代码毁了。整个布局已损坏。所以我在onRender（）中缺少任何重要的东西。

  Ext.define（'EDS.view.selector.Container' 
 extend：'Ext.panel.Panel'，
别名：'widget.selectorcontainer'，
 
 layout：'fit'，
 onRender：function 
 
 ////渲染D3 
 //选择器
 console.log（onRender）; 
 console.log（this.height）; 
 console.log（this.width）; 
 
 var divId = Ext.getCmp（'selector-organization'）。id; 
 var divHeight = Ext.get（divId）.getHeight ）; 
 var divWidth = Ext.get（divId）.getWidth（）; 
 console.log（divHeight）; 
 console.log（divWidth）; 
 renderSelectorOrgView（divId， divHeight，divWidth）; 
 
}，
} 
  

解决方案

如果可以将D3对象渲染为HTML标记的字符串，您可以将该字符串包含在Panel模板中。另一种方法是让Ext JS组件像往常一样渲染，然后注入事件处理程序 boxready 中的新标记。任何一种方式都将避免渲染冲突。

I'm digging into something really interesting when combining Extjs and D3.

In general, ExtJS renders the main frame for the whole page and D3 to render a dynamic graph in certain div in that frame.

As the rendering logic in Extjs is quite complicated, the place where I put the D3 render logic seems crucial.

Here I've tried two:

1) put into 'initComponent'

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

    initComponent: function(){
        renderSelectorOrgView();
    }
}

[D3]
function renderSelectorOrgView(divId, divHeight, divWidth) {
    var svg = d3.select("#" + divId).append("svg");
    ....
}

The problem is that it just doesn't work since during "initComponent", the div is not completely generated.

2) put into global Ext.onReady()

This turned out that D3 can only select empty result. I think the reason is similar to 1)

3) put into onRender()

Logically this should work alright. And in fact D3 can get the div and its attr perfectly. However the problem is, the ExtJS render process is totally ruined by this code. The whole layout is corrupted. So am I missing anything important in onRender()?

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

layout: 'fit',
onRender: function(){

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

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

},
}

解决方案

If it is possible to render D3 object as a string of HTML markup, you can include that string in the Panel template. Another way is to let Ext JS components render themselves as usual, and then inject new markup in boxready event handler. Either way will avoid rendering conflicts.

这篇关于Extjs + D3：渲染冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！