绘图的核心类,生成画布,并且管理绘图相关的所有功能。

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

或者

{
 xtype: 'graph'
}

支持右键拖动

Type: Boolean
Defaults: true

是否允许元素通过其中部的连接点新建连接,false则通过连接线连接

Type: Boolean
Defaults: true

当通过连接点新建连接时,是否自动创建目标元素

Type: Boolean
Defaults: true

是否支持框选

Type: Boolean
Defaults: true

图形是否居中,当可以控制图形缩放时不溢出。

Type: Boolean
Defaults: false

图形是否只读

Type: Boolean
Defaults: true

是否允许从外部拖动元素到绘图容器里面

Type: Boolean
Defaults: false

如果允许从外部拖入元素(allowDrop=true),则此处必填,设置拖动组。

Type: String
Defaults: 'dd'

历史记录容器

Type: Ext.graph.History

剪切板

Type: Ext.graph.Clipboard

插入节点,opts 参数为对象/对象数组,对象属性如下:

1. parent:插入节点的父节点
2. id:节点id
3. value:节点上显示的名字
4. x:节点的x坐标
5. y:节点的y坐标
6. width:节点的宽度
7. height:节点的高度
8. style:节点样式
9. relative:关联节点

返回:插入的节点

插入边,opts 参数为对象/对象数组,对象属性如下:

1. parent:插入边的父节点
2. id:边id
3. value:边上显示的名字
4. source:边的起始节点
5. target:边的目标节点
6. style:节点样式

返回:插入的边

放大图形

返回:this

缩小图形

返回:this

获取图形容器

返回:图形对象

删除节点

根据Cell配置获取可以导入绘图容器的节点对象

返回:可导入的节点

根据cells配置导入元素。

1. cells:元素数组
2. dx:x坐标
3. dy:y坐标
4. target:导入的目标节点
5. evt:事件对象

返回:导入的节点

根据mxCell配置获取可以导出绘图容器的节点对象。

返回:可导出的节点

滚动到指定的节点处

1. cells:节点
2. center:是否居中显示

返回:this

选中指定的节点

返回:this

是否选择节点

返回:boolean

获取选中的节点

返回:选中的节点

复制节点

1. cells:节点
2. allowInvalidEdges

返回:复制的节点

获取默认的父节点

返回:节点

选中全部元素

返回:选中的元素

选中全部顶点

返回:选中的顶点

选中全部边

返回:选中的边

获取XML数据

返回:String

设置只读

返回:this

设置可写

返回:this

右键点击事件

参数:

1. view:当前组件对象
2. e:事件对象
3. selected:是否选中节点