extjs4.1 - 我如何结合 extjs 和 infovis spacetree

Question

我是 extjs 和 infovis 的新手。我正在尝试实现一个包含 2 个组件的页面。上面是一个 extjs 网格，它由从服务器接收的一些数据呈现——> extjs 存储。我需要较低的组件是一个空间树，它将由相同的数据呈现。此外，我需要监听网格上的事件并在空间树中标记选定的节点。有人有一些将 extjs 与 infoVis 集成的例子吗？

Answer 1

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

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

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);
});

}