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 
}

 

你可能感兴趣的:(net extjs tree异步加载数据)