PDA

View Full Version : Graph with panels as nodes and links (lines)



oana77
29 Mar 2012, 5:17 AM
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
29 Mar 2012, 7:58 AM
Is it possible, sure! Basically just drawing a line from x,y to x,y

oana77
29 Mar 2012, 8:46 AM
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
29 Mar 2012, 11:12 PM
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?