net extjs tree异步加载数据

小弟最近刚学习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 
}

 

转载于:https://www.cnblogs.com/cscode/p/4780291.html