如何结合 EXTjs 和 Infovis SpaceTree

Question

我是extjs和infovis的新手。我正在尝试实现一个具有 2 个组件的页面。上部是一个 extjs 网格，由从服务器接收的一些数据呈现 -> extjs 存储。我需要下部组件是一个空间树，它将由相同的数据渲染。此外，我需要侦听网格上的事件并在空间树中标记选定的节点。有没有人有一些与 infoVis 集成扩展的示例？

Answer 1

是的，我已经使用 extjs 成功地将空间树集成到应用程序中。 我下面的示例在窗口中绘制了树（并且为了清晰起见进行了大量编辑），但希望它能给你一个想法。 这里的主要思想是，我们动态创建一个具有随机 id 的div，并将该div 附加到面板并渲染它。 之后，我们可以将div 的 id 传递到空间树初始化的 injectInto 参数中，ST 将在 extjs 组件上绘制。

请注意，ST 实际上是在绑定到窗口并在外部调用的 doRefresh 函数中初始化的。 在我的示例中，我使用 jquery 帖子直接从服务器检索数据，对于您的实现，您可以对网格执行类似操作。 只需侦听存储上的事件，并在空间树的父组件上调用刷新函数。

function createSpacetreeWindow() {
var win = Ext.create('Ext.window.Window', {
    title: ' Window Title',
    id: windowId,
    height: 600,
    maxheight: 600,
    width: 1000,
    layout: {
        type: 'anchor',
        align: 'stretch'
    },
    doRefresh: function () {
        var existing = Ext.getCmp('panel_' + divid);
        if (existing) {
            existing.destroy();
        }
        var newdivid = randomString();
        var divA = document.createElement("div");
        divA.setAttribute("id", newdivid);
        divA.setAttribute("class", "repoPathView");
        win.add({
            id: 'panel_' + divid,
            xtype: 'panel',
            height: 600,
            width: 1000,
            layout: 'fit',
            contentEl: divA
        });
        loadSpaceTree(newdivid, repPathId);
    }
});
win.show();
win.doRefresh();
}
function loadSpacetree(divid, rpId) {
// retrieve the data via jquery POST. 
var url = GetSpacetreeUrl();
$.post(url, { myId: rpId }, function (data) {     
    //Create a new ST instance
    var st = new $jit.ST({
        injectInto: divid,
        duration: 100,
        transition: $jit.Trans.Quart.easeInOut,
        levelDistance: 50,
        offsetX: 350,
        constrained: false,
        siblingOffset: 100,
        levelsToShow: 100,
        Navigation: {
            enable: true,
            panning: true
        },
        Node: {
            type: 'networkelement',
            overridable: true
        },
        Edge: {
            type: 'bezier',
            overridable: true,
            lineWidth: 2,
            color: '#4CC417'
        }
    });
    //load json data
    st.loadJSON(data);
    st.compute();
    //emulate a click on the root node.
    st.onClick(st.root);
});

}