Struts2+JSON(struts2-json-plugin-2.2.1.1.jar)+ExtJs(动态树)

本文的对象是那些ExtJs初学者,为了不耽误您的时间,请误闯者离开亦或是离开

多话不说

ExtJs动态实现树代码,希望能给读者带来帮助...

/** ******************使用panel整个布局使用accordion************************* */
 var left = new Ext.Panel({
    region : 'west',
    id : 'west-panel',
    title : '加载中....',
    split : true,
    width : 200,
    minSize : 175,
    collapsible : true,
    margins : '0 0 0 5',
    layout : 'accordion',
    layoutConfig : {
     animate : true
    },
    items : [],
    listeners : {
     // 查询数据动态构造菜单树
     'beforerender' : function(evt, element) {
      var myajax = Ext.Ajax.request(queryAllConfig(evt,
        element));
     }
    }
   });
 // 查询所有(进入首页,或刷新,执行一次)
 var queryAllConfig = function(evt, element) {
  return {
   url : 'main/tree/showAll.do',
   success : allSCallBack,
   failure : allFCallBack,
   method : 'post',
   // 10秒
   timeout : 1000 * 10,
   params : {
    'data' : new Date()
   }
  }
 }
 // 成功回调[全部]
 var allSCallBack = function(result, request) {

  if (!Ext.isEmpty(result.responseText)) {
   var treeList = Ext.util.JSON.decode(result.responseText);
   // alert(result.responseText);
   if (treeList.length == 0)
    left.setTitle('暂无数据');
   else {
    left.setTitle('功能菜单');
   }
   for (var i = 0; i < treeList.length; i++) {
    var condition = {
     'title' : treeList[i].modName,
     'parentId' : treeList[i].modId
    };
    // 构造多个treepanel
    var treePanel = new Ext.tree.TreePanel(treePanelConfig(condition));
    left.add(treePanel);
   }
   // 记得最后一次需要重绘
   left.doLayout();
   left.items.items[0].expand(true);
  }

 }
 // 失败回调[全部]
 var allFCallBack = function(result, request) {

 }
 // 失败回调[部分]
 var partFCallBack = function(result, request) {

 }
 // 构造多个treepanel添加到panel中
 var treePanelConfig = function(obj) {
  var requestNum = -1;// 保存树上次的请求状态
  if (Ext.isEmpty(obj)) {
   obj = {
    'title' : '暂无数据',
    'parentId' : '-1'
   };
  }
  return {
   title : obj.title,
   autoScroll : true,
   animate : true,
   border : false,
   iconCls : 'settings',// 'settings'
   rootVisible : false,
   containerScroll : true,
   collapsed : true,// 设定全部关闭
   
   // SyncTreeNode instance
   loader : new Ext.tree.TreeLoader({
    dataUrl : 'main/tree/showPart.do',
    listeners : {
     'beforeload' : function(treeLoader, curNode) {
      this.baseParams.parentId = curNode.attributes.id;
     }
    }
   }),

   root : {
    nodeType : 'async',
    id : obj['parentId'],
    expanded : false
   },
   listeners : {
    // 防止用户使劲单击,要对事件进行处理,判断上次的有没有执行完,是继续否返回
    'click' : function(n) {
     try {
      var sn = this.selModel.selNode || {};
      if (n.leaf && !n.disabled) {
       var nodePanel = tab.getComponent(n.id);
       if (!nodePanel) { // 判断是否已经打开该面板
        nodePanel = tab.add({
         'id' : n.id,
         'title' : n.text,
         closable : true, // 通过html载入目标页
         html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
           + n.attributes.path + '"></iframe>'
        });
       }
       tab.setActiveTab(nodePanel);
      } else {
      }
     } catch (e) {
     }
    }
   }
  }
 };

 

PS:var tab = new Ext.TabPanel({
  region : 'center',
  deferredRender : false,
  activeTab : 0,
  plugins : new Hs.index.TabCloseMenu(),
  resizeTabs : true, // turn on tab resizing
  minTabWidth : 115,
  tabWidth : 135,
  autoDestroy : true,
  margins : '0 5 0 0',
  enableTabScroll : true,
  items : [start]
  });