[转帖]extjs 树总结(js) _Tomcat, WebLogic及J2EE讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Tomcat, WebLogic及J2EE讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 1773 | 回复: 0   主题: [转帖]extjs 树总结(js)         下一篇 
kyle
注册用户
等级:新兵
经验:31
发帖:58
精华:0
注册:2011-12-6
状态:离线
发送短消息息给kyle 加好友    发送短消息息给kyle 发消息
发表于: IP:您无权察看 2015-3-17 15:54:29 | [全部帖] [楼主帖] 楼主

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');
}


--转自 北京联动北方科技有限公司




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论