0

私はextjsとinfovisが初めてです。2 つのコンポーネントを持つページを実装しようとしています。上部は、サーバーから受信したデータによってレンダリングされる extjs グリッドです-> extjs ストア。同じデータによってレンダリングされるスペースツリーである下位コンポーネントが必要です。さらに、グリッド上のイベントをリッスンし、スペース ツリーで選択したノードをマークする必要があります。extjs と infoVis の統合の例はありますか?

4

1 に答える 1

0

はい、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);
});

}

于 2013-01-25T21:26:13.643 に答える