EXT 结合jtopo实现网络拓扑刷新 节点删除 告警

主要代码如下

var tab = Ext.create('Ext.form.Panel',{
               title:title+"网络拓扑",
               id:tabId,
               scene : '',
               stage : '',
               closable: true,
               items:[{
                  html :'<canvas width="950"height="800" id="'+id+'" style=" background-color:#EEEEEE; border:1px solid #444;">'
               }],
               listeners: {
                  'afterrender': function (th) {
                            createNetworkTopoData(th,id);
                  },
                  'activate':function(th){
                     console.log("active");
                  },
                  'deactivate' :function(){
                            console.log("deactivate");
                  },
                  'close':function(){

                  }
               }
            })；

 
function createNetworkTopoData(th,id){
          Ext.Ajax.request({
              url : url,
              params : {
                  id: id
              },
              success : function(resp){
                  var info = JSON.parse(resp.responseText);
                  var canvas = document.getElementById(id);
                  var stage = new JTopo.Stage(canvas);
              
                  var scene = new JTopo.Scene();
                  th.scene = scene;
                  th.stage = stage;
                  scene.background = './resources/img/bg.jpg';

                  function node(x, y, img){
                      var node = new JTopo.Node();
                      node.setImage('./resources/img/pstn/' + img, true);
                      node.setLocation(x, y);
                      scene.add(node);
                      return node;
                  }

                  function linkNode(nodeA, nodeZ, f){
                      var link;
                      if(f){
                          var link = new JTopo.FoldLink(nodeA, nodeZ);
                      }else{
                          link = new JTopo.Link(nodeA, nodeZ);
                      }
                      link.direction = 'vertical';
                      scene.add(link);
                      return link;
                  }

                  var router = node(270, 359, 'router.png');
                  router.text = "交换机";
                  router.elementType = "router";
                  var nms = node(360, 430, 'host.png');
                  nms.text = "服务器";
                  nms.elementType = "nms";
                  linkNode(nms, router, true);

                  for(var i = 0; i < lcLen; i++){
                      var lcnode = node(250-i*90, 440, 'linecard.png');
                      lcnode.id = info.id;
                      lcnode.text = info.name;
                      lcnode.elementType = info.type;
                      lcnode.alarm = "告警";
                      lcnode.addEventListener("dbclick",function(event){
                          clearTopoAlarmFunction(id,event.scene.currentElement.id);
                      });
                      linkNode(lcnode, router, true);
                  }
                  var r1= node(350, 305, 'modem.png');
                  r1.text = "路由器";
                  r1.elementType = "router";
                  linkNode(router, r1);

                  var sat1 = node(400, 200, 'satellite_antenna.png');
                   sat1.id = "1" ;
                   linkNode(mainLcard, sat1);
                  sat1.addEventListener("dbclick",function(event){
                      deleteTopoNodeFunction(id,1);
                  });

                  var cloud = node(450, 50, 'antenna.png');
                  linkNode(sat1, cloud);

                  var sat2 = node(500, 200, 'satellite_antenna.png');
                  linkNode(cloud, sat2);
                  sat2.addEventListener("dbclick",function(event){
                              console.log(th);
                  });

                  function hostLink(nodeA, nodeZ){
                      var link = new JTopo.FoldLink(nodeA, nodeZ);
                      link.shadow = false;
                      link.offsetGap = 0;
                      scene.add(link);
                      return link;
                  }
                  var remoteImage = "router2.png";
                  renode.id = info.id;
                  renode.text = info.name;
                  hostLink(sat2, renode);
                  renode.addEventListener("dbclick",function(event){
                          var nodeId = event.scene.currentElement.id;
                          showTopoAlarmFunction(id,nodeId,"二级告警");
                  });
                  stage.add(scene);
              }
          });

 
/**
 * 重绘topo图
 **/
function redrawTopoFunction(tabId){
    var TopoPanel = Ext.getCmp(tabId);
    if(TopoPanel != null){
        createNetworkTopoData(TopoPanel,tabId);
        TopoPanel.stage.frames = 0;//JTopo手动重绘
    }
},
/**
 *显示告警信息
 **/
function showTopoAlarmFunction(tabId,nodeId,alarmMsg){
    var TopoPanel = Ext.getCmp(tabId);
    var scene = TopoPanel.scene;
    scene.findElements(function(e){//遍历所有节点对象
        if(e.id == nodeId){
            e.alarm = alarmMsg;
        }
    });
    // timeTicket = setInterval(function(){
    //     var scene = TopoPanel.scene;
    //     console.log("timeTicket:"+timeTicket);
    //     scene.findElements(function(e){
    //         if(e.id == nodeId){
    //             if(e.alarm == alarmMsg){
    //                 e.alarm = null;
    //             }else{
    //                 e.alarm = alarmMsg;
    //             }
    //         }
    //     });
    // }, 600);
},

/**
 *消除告警信息
 **/
function clearTopoAlarmFunction(tabId,nodeId){
    var TopoPanel = Ext.getCmp(tabId);
    var scene = TopoPanel.scene;
    scene.findElements(function(e){
        if(e.id == nodeId){
            e.alarm = null;
        }
    });
},
/**
 *删除topo节点
 **/
funciton deleteTopoNodeFunction(tabId,nodeId){
    var TopoPanel = Ext.getCmp(tabId);
    var scene = TopoPanel.scene;
    scene.findElements(function(e){
        if(e.id == nodeId){
            scene.remove(scene.currentElement);
        }
    });
},