Results 1 to 4 of 4

Thread: Graph with panels as nodes and links (lines)

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
      0  

    Default Graph with panels as nodes and links (lines)

    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!

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Answers
    3976
    Vote Rating
    1368
      0  

    Default

    Is it possible, sure! Basically just drawing a line from x,y to x,y
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
      0  

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
      0  

    Default

    I have something like this:

    Code:
    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?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •