extjs2.0 异步树

zhannufeifei · 发表于 2013-2-7 15:22:25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<title>tree.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="/html/js/ext2/resources/css/ext-all.css" id="cssfile"/>
<script type="text/javascript" src="/html/js/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/html/js/ext2/ext-all.js"></script>

<script type="text/javascript">
/**
tree demo 1 异步树
组成:
1.节点
   a.普通节点
   b.根节点
   c.默认属性 id text leaf children icon

2..树加载器
3.树容器
4.事件
5.渲染
**/
Ext.onReady(function() {
var button_ = new Ext.Button({
      id:'button_id',
      text:'button_text',
      iconCls:'iconCls',
      handler:function(){
         alert(opTree.getChecked('id'));
      }
});
//异步根节点
var opRoot = new Ext.tree.AsyncTreeNode({
      id:'1',
      text:'root'
});
//与后台通讯的加载器
var loader = new Ext.tree.TreeLoader({
      dataUrl: '/organizationAction.do',
      baseParams:{
         method:'getTree',
         pId:''
      }
});
//树容器
var opTree = new Ext.tree.TreePanel({
      anchor : '95%',
      frame : true,
      width:200,
      height:400,
      animate : false,
      rootVisible : true,
      autoScroll : true,
      loader : loader, //之前定义的加载器
      root : opRoot,  //之前定义的根节点
      tbar:[
         button_
      ]
});
//加载之前所触发的事件
opTree.loader.on("beforeload", function(treeLoader, node) {
      loader.baseParams.pId = node.attributes.id;
});
//树节点点击事件
opTree.on('click',function(node) {
      //alert(node.attributes.text);
});
//渲染树容器
opTree.render(Ext.getBody());
//刷新树 root.reload();
});
</script>
  </head>
  <body>

  </body>
</html>

		自动登录	找回密码
密码			立即注册

extjs2.0 异步树

浏览过的版块