如何组合extjs和infovis空间树

Question

我是extjs和infovis的新手。我正在尝试实现一个页面，这将有2个组件。上面是一个extjs网格，它由从server--> extjs store接收的一些数据呈现。我需要更低的组件是一个空间树，这将由相同的数据渲染。此外，我需要监听网格上的事件，并标记空间树中选定的节点。有没有人有集成extjs和infoVis的例子？

Answer 1

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

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

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

}