Home

extgraph是基于extjs的绘图组件，可以方便的实现流程图、工作流等可视化编辑功能。

---

使用方法：

1、生成空白画布：

var graph = Ext.create('Ext.graph.Panel', {
    renderTo: Ext.getBody()
});

或者

{
    xtype: 'graph'
}

2、插入节点

var vertexs = graph.insertVertex([{
    parent: graph.getDefaultParent(),
    value: 'hello',
    x: 20,
    y: 20,
    width: 80,
    height: 30
},{
    parent: graph.getDefaultParent(),
    value: 'world',
    x: 200,
    y: 150,
    width: 80,
    height: 30
}]);

3、插入边

graph.insertEdge({
    parent: graph.getDefaultParent(),
    source: vertexs[0],
    target: vertexs[1]
});

完成上面三步，就可以生成一个简单的图形啦，这个图形默认支持拖动、新建连接并且自动生成节点、框选等功能，并且可以定制。 ##下面我们看看上面代码的含义吧。

• Ext.graph.Panel
• Ext.graph.Clipboard
• Ext.graph.History
• Ext.graph.OutLine