小弟最近刚学习extjs，总结一下使用extjs 进行treepanel加载的经验
extjs版本4.0.7，后台是使用net 的mvc框架进行数据传递
首先显示一下效果以及后台数据截图
//我们提供动态数据
//这是数据源请求的数据来源（后台自定义JsonTree类提供的主要字段 ID Text FatherID）
extjs代码
<script type="text/javascript">
Ext.onReady(function () {//以下的脚本js代码都写在这里面
}
<script >
（1）、首先是我为树定义了数据源（我使用数据源为树提供数据 这样使用mapping匹配信息后台任意的数据都可以转换成树 ）
var viewStore = Ext.create(‘Ext.data.TreeStore‘, {//这是树的store
proxy: {
type: ‘ajax‘,
url: "/MenuInfor/GetTree",//这是后台请求的url
actionMethods: ‘POST‘,//进行post请求
extraParams: {//这里面我设置我后头需要的参数
fatherID: -1 //这是后台需要的参数（首次加载时提供了一个默认值）
}
},
autoLoad:true,//设置自动加载（不过我设置了false也会自动加载）
fields: [
{ name: ‘id‘, mapping: ‘ID‘ },//这是为树的节点进行信息匹配（mapping里面的信息是后台提供的结果）
{ name: ‘text‘, mapping: ‘Text‘ },//这些紫色的文本是后台提供的数据列
{ name: ‘url‘, mapping: ‘Url‘ },
{ name: ‘fatherID‘, mapping: ‘FatherID‘ }
],
root: {//这是根节点
expanded: true,
id: -1,
text:"视图"
},
listeners:{//这是进行监听事件
beforeload: function (store, op, options) {
//加载前进行处理（这里面的参数我没有弄明白，因此我使用了节点展开事件beforeexpand进行提供后台的参数帮助操作）
console.log("参数1:" + store);
console.log("参数2:" + op);
console.log("参数3:" + options);
//alert(store.proxy.extraParams.fatherID);//fatherID 这是我后台的参数名
Ext.apply(store.proxy.extraparams, this.proxy.extraParams);//使用自定义的参数进行替换
},
beforeexpand: function (node, eopts) {//点击展开节点加载子节点
console.log(node.raw);
this.proxy.extraParams.fatherID = node.raw.ID;//我之前给节点进行字段匹配是树节点id对应后台提供的成员 为ID
// Ext.apply(this.proxy.extraParams, node.raw.ID);
}//这是节点的展开之前的事件
}//这是监听事件
});//这是数据源
//数据源准备好了接下来就是树（树就没有什么代码了）
var tree = Ext.create("Ext.tree.Panel", {
title: "系统视图",
store: viewStore,//为树绑定数据源
height: "100%",
width: "100%",
});
//将树显示到页面里面（我的布局是 window【 左边 一个panel里面是树】，【右边是一个】，其实下面的代码已经和树没有多大的关系了）
var pnWest = new Ext.Panel({//左边的panel（这里面就是我需要显示的tree）
id: ‘pnWest‘,
// title: ‘菜单项‘,
width: "20%",
heigth: ‘auto‘,
split: true,//显示分隔条
region: ‘west‘,
collapsible: true,
items: tree
});
var pnCenter = new Ext.TabPanel({//这是中间区域
width:"80%",
region: ‘center‘,
activeTab: 0,
closable: false,
items: [
{
title: ‘收件箱‘,
authHeight: true,
closable: false,//是否可关闭
html: ‘这里显示所收邮件。。。‘
}
]
});
Ext.create("Ext.Window", {//显示的窗体
width: "100%",
height: "100%",
layout: "border",
closable: false,
draggable: false,
resizable: false,
items:[pnWest,pnCenter]
}).show();//直接显示
后台传递过来的数据（我想任意的数据都转换成树，因此我定义了一个类JsonTree）
public class JsonTree
{
public int ID { get; set; }//树的节点ID
public string Text { get; set; }
public string Url { get; set; }
public int FatherID { get; set; }//如果节点是根节点则设置为-1
}