1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    oana77 is on a distinguished road

      0  

    Default Unanswered: Graph with panels as nodes and links (lines)

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is it possible, sure! Basically just drawing a line from x,y to x,y
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    oana77 is on a distinguished road

      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
    oana77 is on a distinguished road

      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?

Thread Participants: 1

Tags for this Thread