注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理)  

2010-07-06 16:07:31|  分类: extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<html>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪  
<head>extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<title></title>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<link rel="stylesheet" href="../resources/css/ext-all.css" />
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<link rel="stylesheet" href="../resources/css/xtheme-default.css" />
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<script language="javascript" src="../js/ext/ext-base.js"></script>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<script language="javascript" src="../js/ext/ext-all.js"></script>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<script language="javascript" src="<c:url value='/js/xmlHttpHelper.js'/>"></script>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
<script type="text/javascript">
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
var Tree = Ext.tree;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
var tree = null;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        Ext.onReady(
function(){
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            tree 
= new Tree.TreePanel({
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            el:
'tree-div',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            onlyLeafCheckable:
false,
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            rootVisible: 
true,
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            autoScroll:
true,
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            animate:
false,//是否 动画
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
            enableDD:true,// 是 否支持拖放
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
            containerScroll:true,
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            lines:
true
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            checkModel:
'cascade',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            loader:
new Tree.TreeLoader({dataUrl:'../info/rss.do?method=getJsonArray',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                           baseAttrs: 
{uiProvider: Ext.tree.TreeCheckNodeUI}
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }
)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪          }
);       
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
// set the root node
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
    var root = new Tree.AsyncTreeNode(
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
"text":"我的网摘",
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
"id":"01",
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
"allowDrag":false   //false 表示不能被拖动
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }
 
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    );   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪     
//绑定节点加载之前事件
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
    tree.on('beforeload',function(node){   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
if(node.id!='01'){
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪              tree.loader.dataUrl 
= '../info/rss.do?method=getChildJsonArray&nodeid='+node.id;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪          }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }
);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
//绑定节点点击事件
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
    /*
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    tree.on('click', function(node){
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        if(node.id!='root'){
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            alert(node.id);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            alert(node.text);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            alert(node.href);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    });
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
*/

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
//绑定节点拖动事件,找了很久树节点拖 动的实现,终于在老外的帖子发现上了这个实现,拖动以后所需的信息已经捕获,与后台联动的函数 加上即可实现TREE的拖拽
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
   tree.on('nodedrop'
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪      
function(e){   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                           
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪         
if(e.point=='append'){   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            alert(
'当前"【'+e.dropNode.text+'】"被放 到目录"【'+e.target.text+'】"下!');   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
var resulthtml = XmlHttpHelper.transmit(false"get""text", resultUrl, nullnull);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪         }

          
else if(e.point=='above'){   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
//alert('当 前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!');   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪             
var resulthtml = XmlHttpHelper.transmit(false"get""text", resultUrl, nullnull);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪         }
else if(e.point=='below'){   
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
//alert('当 前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!'); 
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
var resulthtml = XmlHttpHelper.transmit(false"get""text", resultUrl, nullnull);  
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪         }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪       }
 
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    );
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
//绑定节点右键菜单功能
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    tree.on(
'contextmenu',function(node,event){  
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪         
// alert("node.id="+ node.id);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
          event.preventDefault(); //这行 是必须的
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
          rightClick.showAt(event.getXY());//取得 鼠标点击坐标,展示菜单
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
          //alert(node.id);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
          document.getElementById('rootid').value=node.id;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪         }
);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪     
//定义右键菜单
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
    var rightClick = new Ext.menu.Menu({
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        id :
'rightClickCont',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        items : [
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            id:
'rMenu1',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            text : 
'编辑',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
//增加菜单点击事件
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
            handler:function (node){
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                 
//alert(node.dropNode.id);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
            }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            id:
'rMenu2',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            text : 
'删除'
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            id:
'rMenu3',
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            text : 
'菜单3'
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }
]
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪     }
);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    tree.setRootNode(root);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
// render the tree
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
    tree.render();
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    root.expand();
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪  }
);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
</script>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪  
</head>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪  
<body>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪      <div id="tree-div" style="overflow:auto;width:98%;"></div>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪  
</body>
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
</html>
注意dataUrl的值,那个action就是动态读取json数据的action,如下:
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪public ActionForward getJsonArray(ActionMapping mapping, ActionForm form,
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            HttpServletRequest request, HttpServletResponse response)
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        FndUser user 
= (FndUser) request.getSession().getAttribute(
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                HASConstants.SESSION_USER);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        JSONArray jsonArray
=this.getJson(user);    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        response.setContentType(
"text/json; charset=GBK");     
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
try {    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                response.getWriter().print(jsonArray);    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }
 catch (Exception e) {    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                log.error(
"输出json失败"+e.getMessage());    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
return null;    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }
  
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
return null;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

我读取的json数据是第一层节点
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪public JSONArray  getJson(FndUser user)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        List list  
= new ArrayList(); 
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        List userContentslist 
= getUserRssContents(user);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
for(Iterator iter=userContentslist.iterator();iter.hasNext();)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            String[] userContent
=(String[])iter.next();
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            Map tree 
= new HashMap();    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            tree.put(
"text", userContent[1]);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            tree.put(
"id", userContent[0]);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            list.add(tree);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        JSONArray jsonArray 
= JSONArray.fromObject(list);    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
return jsonArray;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }
二、当点击第一层节点时,会异步绑定下级节点,在绑定下级节点前,会调用beforeload函数
          tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id
         根 据传入的上级节点的节点ID,得到其下级节点的json格式的数据
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪public ActionForward getChildJsonArray(ActionMapping mapping, ActionForm form,
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            HttpServletRequest request, HttpServletResponse response)
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        FndUser user 
= (FndUser) request.getSession().getAttribute(
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                HASConstants.SESSION_USER);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        String nodeid
=request.getParameter("nodeid");
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        List list  
= new ArrayList(); 
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        List urllisttree 
= getUserRssUrl(user,nodeid);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
for(Iterator iterurl=urllisttree.iterator();iterurl.hasNext();)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            String[] userUrl
=(String[])iterurl.next();;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            Map url 
= new HashMap(); 
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            url.put(
"text", userUrl[2]);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            url.put(
"id", userUrl[0]);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            url.put(
"href""../info/rss.do?method=getRssComent&rssurl="+userUrl[1]);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            url.put(
"hrefTarget""rssiframe");
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            url.put(
"allowDrag", Boolean.TRUE);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            url.put(
"leaf", Boolean.TRUE);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            list.add(url);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        JSONArray jsonArray 
= JSONArray.fromObject(list);     
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        response.setContentType(
"text/json; charset=GBK");     
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
try {    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                response.getWriter().print(jsonArray);    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }
 catch (Exception e) {    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                log.error(
"输出json失败"+e.getMessage());    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
return null;    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }
    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
return null;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

这样,就实现了异步加载,看起来真是很简单哦

对 于拖动事件,也是一样的,调用action,来更改文件夹之间的上下级关系,并实现后台的更新数据库,由于处于学习阶段,代码不尽合理。

xmlHttpHelper.js
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪function XmlHttpHelper(){}
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪XmlHttpHelper.__getXmlHttpObj 
= function()
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
try
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
return new ActiveXObject("MSXML2.XMLHTTP");
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
catch(e)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
try
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
return new XMLHttpRequest();
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
catch(ee)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
throw(new Error(-1"无法创建XMLHTTP对象。"));
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪}
;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
//
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
  使用XMLHTTP和远程 服务器通信。
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
    async            是 否为异步方式:true/false
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
    httpMethod        http 方法:"post"/"get"
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
    responseType    返 回数据的类型:"text"/"xml"/null
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
    url                请 求的URL地址
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
    callback        异 步操作完成时执行的回调函数
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
    postData        post 方式时发送的数据
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪//
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
XmlHttpHelper.transmit = function(async, httpMethod, responseType, url, callback, postData)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
var xmlhttp = this.__getXmlHttpObj();
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    xmlhttp.open(httpMethod, url, async);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
if(!async && httpMethod.toLowerCase() == "post")
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        xmlhttp.setRequestHeader(
'Content-Length', postData.length);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        xmlhttp.setRequestHeader(
"Content-Type""application/x-www-form-urlencoded;charset=UTF-8");
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
if(async)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        xmlhttp.onreadystatechange 
= function()
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
if(xmlhttp.readyState == 4)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
try
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    
if(responseType != null)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                        
if(responseType.toLowerCase() == "text")
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                            callback(xmlhttp.responseText);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                        
else if(responseType.toLowerCase() == "xml")
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                            callback(xmlhttp.responseXML);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    
else
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                        callback(
null);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
finally
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    xmlhttp 
= null;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        xmlhttp.send(postData);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
else
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        xmlhttp.send(postData);
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
if(xmlhttp.status == 200)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
if(responseType != null)
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
if(responseType.toLowerCase() == "text")
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    
return xmlhttp.responseText;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
else if(responseType.toLowerCase() == "xml")
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                    
return xmlhttp.responseXML;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
else
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            
{
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪                
return null;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪            }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪        
return null;
extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪    }

extjs的tree 的使用(拖动、动态载入json数据、拖动后的事件处理) - 风 - 风之泪}
;
  评论这张
 
阅读(391)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018