js画图开发库--mxgraph--[extjs效果的编辑器.html]
?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" title="Hello World 1"style="background:url('editors/images/grid.gif');"></div></div></div></body></html>?
?