前段时间，因为工作很忙，所以一直都没有写了。
最近因为工作上的一个任务需要用到Extjs的Tree，所以现在把我在任务中用到的方法，和遇到的问题，在这里写一下。
任务平台是asp.net 2003 + sqlserver 2005
任务需求是这样的：界面上方左右两个tree，然后通过URL地址栏传入一个参数corpcode，并在右边的tree加载该公司和与该公司有关系的公司（上下级关系和平级关系），然后通过一个文本框，查询一些公司加载到左边的tree，然后通过左右tree的拖动，来调整右边tree公司的关系，最后保存。
这里，我们先建2个页面，其中一个名为CorpGroupRelation，用于加载tree，另一页面为CorpGroupAjax，用于传递ajax。
这里我先把两个文件的代码贴出来：
CorpGroupRelation.aspx
<%...@ Page language="c#" Codebehind="CorpGroupRelation.aspx.cs" AutoEventWireup="false" Inherits="CECERP.IE.CRM.ExtCorp.CorpGroupRelation.CorpGroupRelation" %>
<%...@ Register TagPrefix="eventapproval" Namespace="CECERP.IE.Libraries.Controls.EventApproval" Assembly="CECERP.IE.Libraries" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title></title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="../../../../Libraries/Scripts/extjs-2.0/resources/css/ext-all.css" type="text/css"
rel="stylesheet">
<script language="javascript" src="../../../../Libraries/Scripts/extjs-2.0/adapter/ext/ext-base.js"
type="text/javascript"></script>
<script language="javascript" src="../../../../Libraries/Scripts/extjs-2.0/ext-all.js" type="text/javascript"></script>
<style type="text/css">... HR {...}{ clear: both; visibility: hidden }
</style>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<input id="html_TxtB_corpcode" type="hidden" name="html_TxtB_corpcode"> <input id="html_TxtB_OldID" type="hidden" name="html_TxtB_OldID" runat="server">
<input id="html_TxtB_New" type="hidden" name="html_TxtB_New" runat="server"> <input id="html_TxtB_Root" type="hidden" name="html_TxtB_Root" runat="server">
<TABLE id="html_tableHead" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD>
<P align="center"><INPUT id="TxtB_Query" type="text" size="31" name="TxtB_Query">
<INPUT id="html_btnSearch" type="button" name="html_btnSearch"></P>
</TD>
</TR>
<TR>
<TD>
<TABLE id="html_tabletree" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD width="50%">
<div id="list1" style="HEIGHT: 300px">
<hr>
</div>
<div id="list" style="DISPLAY: none; HEIGHT: 300px">
<hr>
</div>
</TD>
<TD vAlign="top">
<div id="tree" style="HEIGHT: 300px">
<hr>
</div>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</form>
<script language="javascript">...
<asp:Literal Runat="server" ID="LiteralScript"></asp:Literal>
</script>
<script type="text/javascript">...
Ext.onReady(function()...{
//输入框样式
var textquery = new Ext.form.TextField(...{
allowBlank:false,
applyTo: 'TxtB_Query'
});
//搜寻事件
Ext.get('html_btnSearch').on('click', function()...{
if(Ext.get('TxtB_Query').dom.value=="")
...{
alert( Checktext );
Ext.get('TxtB_Query').focus();
}
else
...{
Ext.get('list1').dom.style.display="none";
Ext.get('list').dom.style.display="";
var msg = Ext.get('list');
msg.load(...{
url: 'CorpGroupAjax.aspx', // <-- change if necessary
params: 'param1=1',
text: 'Updating...',
scripts: true
});
msg.show();
SaveList();
}
});
//初始化左侧样式
var listree1 = new Ext.tree.TreePanel(...{
el:'list1',
animate:true,
autoScroll:true,
enableDD:true,
containerScroll: true,
lines:false,
rootVisible:false,
dropConfig: ...{appendOnly:true}
});
new Ext.tree.TreeSorter(listree1, ...{folderSort:true});
var root = new Ext.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree1.setRootNode(root);
listree1.render();
root.expand(true, /**//*no anim*/ false);
});
var tree;
var RightTreeLoad = function()...{
var Tree = Ext.tree;
return ...{
init : function()...{
tree = new Tree.TreePanel(...{
el:'tree',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),
enableDD:true,
containerScroll: true,
dropConfig: ...{appendOnly:true}
});
new Tree.TreeSorter(tree, ...{folderSort:true});
var root = new Tree.AsyncTreeNode(...{
text: corpName,
draggable:false,
id:'source'
});
tree.setRootNode(root);
tree.render();
root.expand(true, /**//*no anim*/ false);
tree.on('click',function(e)...{
SaveList();
});
tree.on('enddrag',function(Node,e)...{
SaveList();
FindList();
});
}
};
}();
//右侧菜单加载
Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad, true);
//左侧列表加载