js画图开发库-mxgraph-[extjs成效的编辑器.html] _HTML/CSS

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" 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>