Question

我是extjs和infovis的新手。我正在尝试实现一个包含2个组件的页面。上面是一个extjs网格，它由服务器提供的一些数据呈现 - ＆gt; extjs商店。我需要将较低的组件作为空间树，它将由相同的数据呈现。此外，我需要监听网格上的事件并在空间树中销售选定的节点。有没有人有一些与infoVis集成extjs的例子？

Answer 1

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

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

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

}

我如何结合extjs和infovis spacetree

1 个答案: