Graph with panels as nodes and links (lines)

[oana77]

Hy, I'm new to ExtJs 4, and I'm trying to do something that I'm not sure it is possible so this is what I want to ask. I want to make something like a graph representation ... in which to have some small panels (or a component) that are linked between them (with lines) and when I move a panel to destroy the current link and to link it to other panel. Is it possible somehow to do this with canvas or draw component(sprites)? I need the nodes of the graph to be a panel, tab panel more precisely, so I can add some other components in it, like a textarea, button or smth else.

Thank you!

[mitchellsimoens]

Is it possible, sure! Basically just drawing a line from x,y to x,y

[oana77]

But can I have a drawing surface or a canvas and put in it ExtJs components ?

The panels are generated dynamically based on some data and also based on some info I want to create the links between the panels.

[oana77]

I have something like this:

Ext.define('OC.view.ConversationView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.conversationView',
    requires: ['OC.store.ConversationStore', 'OC.model.Conversation'],
    
    layout: 'absolute',
    itemId: 'conversationView',
    
    initComponent: function() {                
        var config = {
            title: 'Conversations',
            autoScroll: true,
            width: '100%',
            height: '100%',
            items: []
        };
        
        Ext.apply(this, Ext.applyIf(this.initialConfig, config));
        this.callParent(arguments);            
    },
    
    drawCanvas: function(el) {
        var canvas = el;
        var ctx = canvas.getContext ( "2d" );
        ctx.beginPath();
        ctx.moveTo(30, 30);
        ctx.lineTo(600, 600);
        ctx.stroke();
    },
    
    refresh: function(store){        
        this.removeAll(true); 

       // ==> here I tried to add the canvas surface (when refreshing the ui) before adding the rest of the
       //elements on ui 
        var canvas = {
                xtype: 'box',
                x: 0,
                y: 0,
                autoEl: {
                    tag: 'canvas',
                    width: 1000,
                    height: 1000
                }
         };
        this.items.add(canvas); 
        this.drawCanvas(canvas);
        // ==> but it is not working

        var elems = this.generateUIElements(store.data.items);
        var me = this;
        Ext.each(elems, function(it){
            me.items.add(it);
        });        
        this.doLayout();
    },
    
    generateUIElements: function(records) {
        var uiElements = [];
        var i = 0;
        Ext.each(records, function(record){
            var threads = record.threads();
            threads.each(function(thread) {
                var msgs = thread.messages();
                var coordX = (220 * i) + 20 * (i + 1);
                var j = 0;
                msgs.each(function(message) {
                    coordY = (80 * j) + 10 * (j + 1);
                    var messbox = Ext.create('widget.messageBox',{
                        x: coordX,
                        y: coordY,
                        message: message
                    });
                    j = j + 1;
                    uiElements.push(messbox);
                    // ==> and here it should be added each link/line for the panel - messbox 
                });
                i = i + 1;                
            }); 
        }, this);    
        return uiElements;        
    }
});

How should I do it?