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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Is it possible, sure! Basically just drawing a line from x,y to x,y
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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
  •