借助css定位实现动态关联的一个例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="ext-core.js"> </script> </head> <style type="text/css"> #manager { height: 200px; } .server { height: 100%; width: 20%; position: relative; float: left; } .server-name { height: 20px; width: 50px; } .server-body { width: 10%; height: 160px; background-color: blue; } .div-arrows { position: absolute; width: 90%; left: 10%; top: 20px; height: 100%; } .arrow-from { width: 100%; height: 16px; background: url(from.JPG) no-repeat center right; !important } .arrow-to { width: 100%; height: 16px; background: url(to.JPG) no-repeat center left; !important } </style> <script type="text/javascript"> ServerManager = (function(){ var dh = Ext.DomHelper; var el; var servers = []; return {init:function(id){el = Ext.get(id);}, addServer: function(name){servers.push(name); dh.append(el, { cls: 'server', id: name, children: [{ cls: 'server-name', html: name }, { cls: 'server-body' }, { cls: 'div-arrows' }] }); }, resiveMessge: function(msg){ var arr = msg.split('-'); if (this.getIndex(arr) < this.getIndex(arr)) { var arrowEl = Ext.fly(arr).child('.div-arrows');dh.append(arrowEl,{cls:'arrow-from'}); } else { var arrowEl = Ext.fly(arr).child('.div-arrows');dh.append(arrowEl,{cls:'arrow-to'}); } }, getIndex: function(name){ var i = servers.indexOf(name); if (i == -1) throw '找不到该服务器'; return i; } } })()Ext.onReady(function(){//例子ServerManager.init('manager');ServerManager.addServer('a');ServerManager.addServer('b');ServerManager.addServer('c');ServerManager.resiveMessge('a-b');ServerManager.resiveMessge('b-c');ServerManager.resiveMessge('c-b');ServerManager.addServer('d');ServerManager.resiveMessge('d-c');}); </script> <body> <div id="manager"> </div> </body></html>效果：
http://dl.iteye.com/upload/attachment/245835/b9df93f7-710b-3826-b588-41ea1343fa17.png
页:
[1]