extjs 树总结（js）

extjs树分为动态和静态两种：一般静态用于静态画面演示什么的，绝大部分都是动态的

 

var tree;
var menuMain = null;
var Menu = Ext.menu;
// 显示icon路径
var deleteIcon = './ima/icon16/delete.gif';
var fileIcon = './ima/icon16/file.gif';
var accessIcon = './ima/icon16/list.gif';
var folderAddIcon = './ima/icon16/folder.gif';
var fileAddIcon = './ima/icon16/upload.gif';

Ext.onReady(doInitTree);

 

function doInitTree() {

// 定义节点的属性

 var root = new Ext.tree.AsyncTreeNode({
  id :  document.forms[0].rootId.value,
  text : document.forms[0].rootName.value,
  leaf : false,
  flag : document.forms[0].flag.value,
  path : document.forms[0].path.value,
  version : document.forms[0].version.value
 });

// 树loader     走Action取数据库数据    相当于store

 var loader = new Ext.tree.TreeLoader({
  url : "ExplorerAction.do?dispatch=doLoadTree"
 });

 

 // 用来记录node的属性值

 loader.on("beforeload", function(loader, node) {
        loader.baseParams.nodeId = node.id;
        loader.baseParams.fccId = document.getElementById("fccId").value;
        loader.baseParams.linkId = document.getElementById("linkId").value;
        loader.baseParams.subId = document.getElementById("subId").value;
        loader.baseParams.serviceId = document.getElementById("serviceId").value;
    });

 

// 定义TreePanel

 tree = new Ext.tree.TreePanel({
  renderTo : "treePanel",
  root : root,
  loader : loader,
  border : false,
  useArrows:false,
  rootVisible : false,
  enableDD:false,
  animate:true,
  containerScroll:true,
  autoScroll:true,
  tbar:[{text:'全打开',handler: onExpandAll},{text:'全关闭',handler: onCollapseAll},{text:'重新读取',handler: reload}]
 });

 root.expand();

 

 // tree事件

 tree.on("contextmenu", showMenu, this);
 tree.on("dblclick", download, this);
 tree.on("click", treeExpand, this);

}

//全打开

function onExpandAll(){

  Ext.Ajax.request( {
        url : "ExplorerAction.do?dispatch=loadTreeAll",
        method : 'post',
        params : {
            fccId : document.getElementById('fccId').value,
            linkId : document.getElementById('linkId').value,
            subId : document.getElementById('subId').value,
            serviceId : document.getElementById('serviceId').value

        }
    });

 tree.expandAll();
}

//全关闭

function onCollapseAll(){
 tree.collapseAll();
}

//重新读取

function reload(){
 tree.getRootNode().reload();
}

function treeExpand(node){
 node.expand();
}

// 文件下载

function download(node){
 if(node.attributes.leaf == true){
  Ext.Ajax.request( {
         url : "ExplorerAction.do?dispatch=fileDownload",
         method : 'post',
         params : {
             fccId : document.getElementById('fccId').value,
             fileId : node.attributes.id,
             version : node.attributes.version
         },
         success : function() {
             node.parentNode.reload();
         }
     });
 }
}

// 根据业务逻辑来显示不同的菜单

function showMenu(node){

// 选中节点，因为showMenu这个方法是点击右键的时候触发的，但是extjs中，只有点击某条信息（背景色变蓝），才会传值，不选中的

// 情况下取得的节点信息为空，所以，在这里强制执行选中节点。

 tree.getSelectionModel().select(node);
 if(node.attributes.flag == null){
  fileMenu();
 } else if(node.attributes.flag ==1){
  freeFolderMenu();
 } else if(node.attributes.flag ==0){
  var path = node.attributes.path;
  if(path.lastIndexOf("/")>13){
    folderMenu2();
  } else {
   folderMenu1();
  }
 }
 menuMain.show(node.ui.getAnchor());
}

//定义静态的menu

function fileMenu(){

 menuMain = new Menu.Menu(
  {id: 'mainMenu',
    items: [
    {id:'fileDelete', text:'文件删除', handler:onItemRightClick, icon: deleteIcon },
    {id:'fileInfo', text:'文件信息', icon: fileIcon },
    {id:'fileAccessBackDate', text:'文件历史', handler:onItemRightClick, icon: accessIcon }
    ]
  }
 );
 return menuMain;
}

//定义静态的menu

function freeFolderMenu(){

 menuMain = new Menu.Menu(
  {id: 'mainMenu',
    items: [
    {id:'folderAdd', text:'文件夹添加',handler:onItemRightClick,  icon: folderAddIcon },
    {id:'foldDelete', text:'文件夹删除', handler:onItemRightClick, icon: deleteIcon },
    {id:'fileAdd', text:'文件添加',icon: fileAddIcon },
    {id:'folderAccessBackDate', text:'文件历史', handler:onItemRightClick,icon: accessIcon }
    ]
  }
 );
 return menuMain;
}

//定义静态的menu

function folderMenu1(){

 menuMain = new Menu.Menu(
  {id: 'mainMenu',
    items: [
    {id:'folderAdd', text:'文件夹添加',icon: folderAddIcon }

    ]
  }
 );
 return menuMain;
}

//定义静态的menu

function folderMenu2(){

 menuMain = new Menu.Menu(
  {id: 'mainMenu',
    items: [
    {id:'folderAdd', text:'文件夹添加',handler:onItemRightClick, icon: folderAddIcon },
    {id:'fileAdd', text:'文件添加',icon: fileAddIcon },
    {id:'folderAccessBackDate', text:'历史文件', handler:onItemRightClick, icon: accessIcon }

    ]
  }
 );
 return menuMain;
}

 

//menu中定义handle来指定要执行的方法，在这个方法中根据不同的ID来执行不同的方法

function onItemRightClick(item){

//取得选中的节点信息

 var node = tree.getSelectionModel().getSelectedNode();
 if(item.id == 'foldDelete'){
   deleteFolder(node);
 } else if(item.id == 'fileDelete'){
   deleteFile(node);
 } else if(item.id == 'folderAccessBackDate'){
   getFolderAccess(node);
 } else if(item.id == 'fileAccessBackDate'){
   getFileAccess(node);
 } else if(item.id == 'folderAdd'){
   getFolderAdd(node);
 }

}

 

//用ajax的方式，不进行画面跳转，但是要刷新父节点的信息

function deleteFolder(node){

  Ext.Ajax.request( {
        url : "ExplorerAction.do?dispatch=deleteFolder",
        method : 'post',
        params : {
            fccId : document.getElementById('fccId').value,
            folderId : node.attributes.id
        },
        success : function() {

            //刷新父节点的信息
            node.parentNode.reload();
        }
    });

}

function deleteFile(node){

  Ext.Ajax.request( {
        url : "ExplorerAction.do?dispatch=deleteFile",
        method : 'post',
        params : {
            fccId : document.getElementById('fccId').value,
            fileId : node.attributes.id
        },
        success : function() {
            node.parentNode.reload();
        }
    });

}

//打开新画面

function getFolderAccess(node){

 window.open("AccessLogAction.do?dispatch=getFolderAccessLog&folderId="+node.attributes.id+"",'access');

}