好久没有更新博客了,借此机会就把最近一段时间的工作成果拿出来秀一下了。

  由于使用了VML,所以使用环境就是IE Only的了。(其实本来也想做成跨浏览器的,可惜其他的几种矢量图技术都不是很适合做嵌入应用。)

  例子在这里下载在这里,API在下面:

Shed.workflow.Palette

绘制流程的主容器。该组件继承自Ext.Panel,因此Ext.Panel的所有属性、方法和事件都适用于它。下表仅列出了所有该组件特有的属性和方法。
公共属性
属性名 属性类型 属性说明
bottomHeight String/Number 设置图形绘制区域大小时的偏移高度
parallelizable Boolean 是否允许绘制并行节点
readOnly Boolean 是否允许改动模板内容
rightWidth String/Number 设置图形绘制区域大小时的偏移宽度
statusbar Boolean 是否拥有状态栏
公共方法
方法名 输入参数 方法说明
addLine Object/[Object] 添加连线
addNode Object/[Object] 添加节点
clearPalette   清空绘制区域
clearSelected   清除所有选中对象
findNode String 根据指定ID查找节点
getLines   得到所有连线
getNodes   得到所有节点
isValid   效验模板是否存在孤立节点,或者是串行模板中是否存在并行节点。如果以上情况都不存在返回true,否则返回false
removeSelected   删除选中节点和连线
resizePalette   重新设置绘制区域大小
selectAll   选中所有节点和连线
setLineFlag String 设置当前绘制状态,如果当前状态为绘制节点则输入参数为null,如果当前状态为绘制连线则输入参数为'line'。

Shed.workflow.Node

流程节点组件。该组件支持所有的Html元素的原生事件,且回调函数的作用域为该组件本身。
公共属性
属性名 属性类型 属性说明
fillcolor String 节点填充颜色代码
fromId Array 上级节点ID数组
height Number 节点高度
id String 节点ID
left Number 节点X轴坐标
name String 节点文本
qtip Boolean/Object 节点工具提示对象
selected Boolean 节点是否被选中
selFillcolor String 节点被选中时的填充颜色代码
selShadowcolor String 节点被选中时的阴影颜色代码
selStrokecolor String 节点被选中时的边框颜色代码
selTextcolor Boolean 节点被选中时的文本颜色代码
shadowcolor String 节点阴影颜色代码
shadowFlag String 节点是否显示阴影
strokecolor String 节点边框颜色代码
textcolor String 节点文本颜色代码
textFlag Boolean 节点是否显示文本
toId Array 下级节点ID数组
top Number 节点Y轴坐标
type String 节点类型,普通节点为'node',开始节点为'start',结束节点为'end'。
width Number 节点宽度
公共方法
方法名 输入参数 方法说明
clearSelected   取消节点选中状态
getPosition   取得当前节点位置,形如:{top: 0, left: 0}
moveTo Number, Number 将节点移动到指定位置
remove   删除节点
setHeight Number 设置节点高度
setLeft Number 设置节点X轴坐标
setSelected   设置节点为选中状态
setText String, Boolean 设置节点文本,第二参数如果为true,则同时更新节点工具提示的内容
setTop Number 设置节点Y轴坐标
setWidth Number 设置节点宽度

Shed.workflow.Line

流程连线组件。该组件支持所有的Html元素的原生事件,且回调函数的作用域为该组件本身。
公共属性
属性名 属性类型 属性说明
fromNode Shed.workflow.Node 连线的上级节点
id String 连线的ID
name String 连线的文本
strokecolor String 连线的颜色代码
strokeweight Number 连线的粗度
textFlag Boolean 是否显示连线的文本
toNode Shed.workflow.Node 连线的下级节点
type Boolean 连线的类型,默认为'line'
公共方法
方法名 输入参数 方法说明
clearSelected   取消连线选中状态
remove   删除连线
setSelected   设置连线的状态为选中
setText   设置连线的文本