Ext.graph.Panel

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

---

使用方法：

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

或者

{
    xtype: 'graph'
}

配置

panning

支持右键拖动

Type: Boolean
Defaults: true

connectable

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

Type: Boolean
Defaults: true

autoCreateTarget

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

Type: Boolean
Defaults: true

centerZoom

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

Type: Boolean
Defaults: false

enabled

图形是否只读

Type: Boolean
Defaults: true

allowDrop

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

Type: Boolean
Defaults: false

dropGroup

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

Type: String
Defaults: 'dd'

属性

history

历史记录容器

Type: Ext.graph.History

clipboard

剪切板

Type: Ext.graph.Clipboard

方法

.insertVertex(opts)

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

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

返回：插入的节点

.insertEdge(opts)

插入边，opts 参数为对象/对象数组，对象属性如下：

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

返回：插入的边

.zoomIn()

放大图形

返回：this

.zoomOut()

缩小图形

返回：this

.getGraph()

获取图形容器

返回：图形对象

.removeCells(cells, includeEdges)

删除节点

.getImportableCells(cells)

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

返回：可导入的节点

.importCells(cells, dx, dy, target, evt)

根据cells配置导入元素。

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

返回：导入的节点

.getExportableCells(cells)

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

返回：可导出的节点

.scrollCellToVisible(cell, center)

滚动到指定的节点处

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

返回：this

.setSelectionCells(cells)

选中指定的节点

返回：this

.isSelectionEmpty()

是否选择节点

返回：boolean

.getSelectionCells()

获取选中的节点

返回：选中的节点

.cloneCells(cells, allowInvalidEdges)

复制节点

1. cells：节点
2. allowInvalidEdges

返回：复制的节点

.getDefaultParent()

获取默认的父节点

返回：节点

.selectAll()

选中全部元素

返回：选中的元素

.selectVertices()

选中全部顶点

返回：选中的顶点

.selectEdges()

选中全部边

返回：选中的边

.getValue()

获取XML数据

返回：String

.disable()

设置只读

返回：this

.enable()

设置可写

返回：this

事件

contextmenu

右键点击事件

参数：

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

itemclick

单击事件

参数：

1. view：当前组件对象
2. cell：单击的节点数据

itemdblclick

双击事件

参数：

1. view：当前组件对象
2. cell：双击的节点数据

下一个：Ext.graph.Clipboard