?js画图开发库--mxgraph--[extjs效果的编辑器.html]?
?
点击按钮显示extjs效果的窗口
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>extjs效果图</title>
<link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js"></script>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支持库文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
// 程序从此启动
var graph;
function main(container)
{
// 检查浏览器兼容性
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 在容器中创建图形
graph = new mxGraph(container);
// 启用浏览器默认下拉选项
new mxRubberband(graph);
graph.setPanning(true);
graph.setTooltips(true);
// 在图形中创建默认组件
var parent = graph.getDefaultParent();
// 开启更新事务
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// 结束更新事务
graph.getModel().endUpdate();
}
}
};
Ext.onReady(function()
{
var win;
var button = Ext.get('show-btn');
button.on('click', function()
{
// 第一次点击按钮时显示窗口
if(!win)
{
win = new Ext.Window(
{
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: new Ext.TabPanel(
{
el: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),
buttons: [
{
text:'Submit',
disabled:true
},
{
text: 'Close',
handler: function()
{
win.hide();
}
}]
});
// 适应SVG容器的窗口
win.on('resize', function()
{
graph.sizeDidChange();
});
}
win.show(this);
});
});
</script>
</head>
<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))">
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<!-- 创建带网格壁纸和曲线的一个容器 -->
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- 自动创建选项卡 -->
<div id="graphContainer" class="x-tab" title="Hello World 1"
style="background:url('editors/images/grid.gif');">
</div>
</div>
</div>
</body>
</html>
?
?
