ext树 帮个忙啊 看看那儿出来问题

时间：2022-03-28 21:22:14
//html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.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="./styles.css">-->
          <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
      <script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script>
    <script> 
   Ext.onReady(function(n) {
  Ext.BLANK_IMAGE_URL='ext/resources/images/default/s.gif';
   var Tree = Ext.tree;
var root = new Tree.AsyncTreeNode({
    text: '根1',
    draggable:false,    
    id:'1',
    children:[{//子节点
    text:'node',//显示文字为loading
    iconCls: 'node',//使用图标为loading 在index.html style 中定义
    leaf:true//是叶子节点,不再包含子节点
  }
  ]    
    }  );
var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoader
var tree = new Ext.tree.TreePanel({
        autoScroll : true,  /*True表示为在面板body元素上出现滚动条*/
animate : true, /*True表示为转换状态时出现动画*/
enableDD : true,  //不允许子节点拖动  
        split:true,//设置分隔条 
        rootVisible: false,
collapsible:true,//可以进行缩进 
collapseMode:'mini',//设置左右缩减
    contentEl:'west',
    border:true,
    root:root,
    region:'west',
    id:'west-panel',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    margins:'0 0 0 0',
    layout:'accordion',
    title:'菜单',
    collapsible :true,
    layoutConfig:{
        animate:true
        },
    rootVisible:true,
    autoScroll:true,
    loader:treeLoader
    });
      
tree.on('click',treeClick);
//tree.expandAll();
var tab = new Ext.TabPanel({
    region:'center',
    deferredRender:false,
    activeTab:0,
    items:[{
        contentEl:'center2',
        title: '首页',
        autoScroll:true
    }]
});

function treeClick(node,e) {
     if(node.isLeaf()){
        e.stopEvent();
        var n = tab.getComponent(node.id);
        if (!n) {
            var n = tab.add({
                'id' : node.id,
                'title' : node.text,
                closable:true
                });
        }
        tab.setActiveTab(n);
     }
}
function newTab(id,text,pid,url) {
      var n = tab.getComponent(id);
        if (!n) {
            var n = tab.add({
                'id' : id,
                'title' : text,
                'pid':pid,
                closable:true,
                html :
'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>'
                });
        }
        tab.setActiveTab(n);
}

function gettree(root){
   var id = root.id;
  if(root.firstChild.pid=id){  // 如果字节的id等于夫节点id
   alert('pid='+id);   //打印出父节点id
   Ext.Ajax.request({
    url: 'json.txt',
    params: {root:id},
    method: 'GET',
  success: function(v){  //成功返回
     alert("成功");
      var myData = JSON.parse(v.responseText); // 得到服务器返回的json串
            for(var i=0;i<myData.length;i++ ){
            var cnode=new Ext.tree.AsyncTreeNode({
               id:myData[i].id,//id 为服务器返回id 父节点id
               text:myData[i].departname,//显示内容为服务器返回id 父节点id
               leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
              children:[{//添加子节点,如果服务器返回tl<i>.leaf为ture则孩子节点将无法显示
                text:'text',
                pid:'1',
              
                leaf:true
               }]
            });
            cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
              node.appendChild(cnode);//将当前节点添加为待展开节点子节点
           }
   
    },
    failure: function2  // 失败
   });
  } 
 }

 function function2(){
 // alert("失败");
 }


Ext.onReady(function(){
   var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new Ext.BoxComponent({
                region:'north',
                el: 'north',
                height:35
            }),
            tree,
            tab
         ]
    });

    tree.render();
    root.on('expand',gettree);//当根节点展开后触发gettree事件
    //root.expand();
    //loadend();
});
});
    </script>    
  </head>
  
  <body>
   <div id="north">
    <p class="api-title">tree</p>
</div>
<div id="west">
</div>
<div id="center2"></div>
<div id="loading-mask" style=""></div>
<div id="loading">   
</div>
  </body>
</html>


//json数据
 var v=[
     {text:'根2',id:'2',pid:'1',children:
         [
        {text:'叶子1',id:'01',pid:'2'},
        {text:'叶子2',id:'02',pid:'2',children:
         [
            {text:'子叶子1',id:'001',pid:'01',leaf:true},
            {text:'子叶子2',id:'002',pid:'02'leaf:true}
         ]
   }
 ];

6 个解决方案

#1

建议楼主发帖的时候用那个“插入源代码”的功能，你这样发我连复制你的源代码去运行都不行啊

#2



var myData = new Ext.util.JSON.decode (v.responseText); 

#3

看的头疼
贴关键代码

#4

太挑战视力了

#5



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>MyHtml.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="extjs/resources/css/ext-all.css"/> 

	    <link rel="stylesheet" type="text/css" href="extjs/css/extendcss.css"/>

	    

		<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> 

		<script type="text/javascript" src="extjs/ext-all.js"></script> 

		<script type="text/javascript" src="extjs/myExtend.js"></script>

		<script type="text/javascript" src="extjs/ext-lang-zh_CN-min.js"></script> 


		<script> 


 Ext.onReady(function(n) {

	Ext.BLANK_IMAGE_URL='extjs/resources/images/default/s.gif';

	var Tree = Ext.tree;

	var root = new Tree.AsyncTreeNode({

		text: '根1',

		draggable:false,   

		id:'1',

		children:[{//子节点

		text:'node',//显示文字为loading

		iconCls: 'node',//使用图标为loading 在index.html style 中定义

		leaf:true//是叶子节点,不再包含子节点

		}]   

  	} );

  	

	var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoader

	var tree = new Ext.tree.TreePanel({

		autoScroll : true, /*True表示为在面板body元素上出现滚动条*/

		animate : true, /*True表示为转换状态时出现动画*/

		enableDD : true, //不允许子节点拖动   

		split:true,//设置分隔条  

		rootVisible: false,

		collapsible:true,//可以进行缩进  

		collapseMode:'mini',//设置左右缩减

		contentEl:'west',

		border:true,

		root:root,

		region:'west',

		id:'west-panel',

		split:true,

		width: 200,

		minSize: 175,

		maxSize: 400,

		margins:'0 0 0 0',

		layout:'accordion',

		title:'菜单',

		collapsible :true,

		layoutConfig:{

			animate:true

		},

		rootVisible:true,

		autoScroll:true,

		loader:treeLoader

	});

	  

	tree.on('click',treeClick);

	//tree.expandAll();

	var tab = new Ext.TabPanel({

		region:'center',

		deferredRender:false,

		activeTab:0,

		items:[{

			contentEl:'center2',

			title: '首页',

			autoScroll:true

		}]

	});


	function treeClick(node,e) {

		if(node.isLeaf()){

			e.stopEvent();

			var n = tab.getComponent(node.id);

			if (!n) {

				var n = tab.add({

					'id' : node.id,

					'title' : node.text,

					closable:true

				});

			}

			tab.setActiveTab(n);

		}

	}

	function newTab(id,text,pid,url) {

		var n = tab.getComponent(id);

		if (!n) {

			var n = tab.add({

				'id' : id,

				'title' : text,

				'pid':pid,

				closable:true,

				html :

				'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>'

			});

		}

		tab.setActiveTab(n);

	}


	function gettree(node){

		var id = node.id;

		if(node.firstChild.pid=id){ // 如果字节的id等于夫节点id

			Ext.Ajax.request({

				url: 'json.txt',

				params: {root:id},

				method: 'GET',

				success: function(v){ //成功返回

					var myData = new Ext.util.JSON.decode(v.responseText); // 得到服务器返回的json串

					for(var i=0;i<myData.length;i++ ){

						var cnode=new Ext.tree.AsyncTreeNode({

							id:myData[i].id,//id 为服务器返回id 父节点id

							text:myData[i].text,//显示内容为服务器返回id 父节点id

							leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点

							children:[{//添加子节点,如果服务器返回tl<i>.leaf为ture则孩子节点将无法显示

								text:'text',

								pid:'1',

								leaf:true

							}]

						});

					    node.appendChild(cnode);//将当前节点添加为待展开节点子节点

					}

				    

				},

				failure: function2 // 失败

			});

		}  

	}


	function function2(){


	}



	var viewport = new Ext.Viewport({

		layout:'border',

		items:[

		new Ext.BoxComponent({

			region:'north',

			el: 'north',

			height:35

		}),

		tree,

		tab

		]

	});


	tree.render();

	root.on('expand',gettree);//当根节点展开后触发gettree事件


});

  </script>

	</head>


	<body>

		<div id="north">

			<p class="api-title">

				tree

			</p>

		</div>

		<div id="west"></div>

		<div id="center2"></div>

		<div id="loading-mask" style=""></div>

		<div id="loading"></div>

	</body>

</html>


[

  {text:'aaa',id:'2',pid:'1',leaf:false,children:[

  	 {text:'叶子1',id:'01',pid:'2',leaf:true}	

  ]}

]

#6

打开chrome 按CTRL+Shift+J或者Firefox-->firebug

#1

建议楼主发帖的时候用那个“插入源代码”的功能，你这样发我连复制你的源代码去运行都不行啊

#2



var myData = new Ext.util.JSON.decode (v.responseText); 

#3

看的头疼
贴关键代码

#4

太挑战视力了

#5



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>MyHtml.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="extjs/resources/css/ext-all.css"/> 

	    <link rel="stylesheet" type="text/css" href="extjs/css/extendcss.css"/>

	    

		<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> 

		<script type="text/javascript" src="extjs/ext-all.js"></script> 

		<script type="text/javascript" src="extjs/myExtend.js"></script>

		<script type="text/javascript" src="extjs/ext-lang-zh_CN-min.js"></script> 


		<script> 


 Ext.onReady(function(n) {

	Ext.BLANK_IMAGE_URL='extjs/resources/images/default/s.gif';

	var Tree = Ext.tree;

	var root = new Tree.AsyncTreeNode({

		text: '根1',

		draggable:false,   

		id:'1',

		children:[{//子节点

		text:'node',//显示文字为loading

		iconCls: 'node',//使用图标为loading 在index.html style 中定义

		leaf:true//是叶子节点,不再包含子节点

		}]   

  	} );

  	

	var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoader

	var tree = new Ext.tree.TreePanel({

		autoScroll : true, /*True表示为在面板body元素上出现滚动条*/

		animate : true, /*True表示为转换状态时出现动画*/

		enableDD : true, //不允许子节点拖动   

		split:true,//设置分隔条  

		rootVisible: false,

		collapsible:true,//可以进行缩进  

		collapseMode:'mini',//设置左右缩减

		contentEl:'west',

		border:true,

		root:root,

		region:'west',

		id:'west-panel',

		split:true,

		width: 200,

		minSize: 175,

		maxSize: 400,

		margins:'0 0 0 0',

		layout:'accordion',

		title:'菜单',

		collapsible :true,

		layoutConfig:{

			animate:true

		},

		rootVisible:true,

		autoScroll:true,

		loader:treeLoader

	});

	  

	tree.on('click',treeClick);

	//tree.expandAll();

	var tab = new Ext.TabPanel({

		region:'center',

		deferredRender:false,

		activeTab:0,

		items:[{

			contentEl:'center2',

			title: '首页',

			autoScroll:true

		}]

	});


	function treeClick(node,e) {

		if(node.isLeaf()){

			e.stopEvent();

			var n = tab.getComponent(node.id);

			if (!n) {

				var n = tab.add({

					'id' : node.id,

					'title' : node.text,

					closable:true

				});

			}

			tab.setActiveTab(n);

		}

	}

	function newTab(id,text,pid,url) {

		var n = tab.getComponent(id);

		if (!n) {

			var n = tab.add({

				'id' : id,

				'title' : text,

				'pid':pid,

				closable:true,

				html :

				'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>'

			});

		}

		tab.setActiveTab(n);

	}


	function gettree(node){

		var id = node.id;

		if(node.firstChild.pid=id){ // 如果字节的id等于夫节点id

			Ext.Ajax.request({

				url: 'json.txt',

				params: {root:id},

				method: 'GET',

				success: function(v){ //成功返回

					var myData = new Ext.util.JSON.decode(v.responseText); // 得到服务器返回的json串

					for(var i=0;i<myData.length;i++ ){

						var cnode=new Ext.tree.AsyncTreeNode({

							id:myData[i].id,//id 为服务器返回id 父节点id

							text:myData[i].text,//显示内容为服务器返回id 父节点id

							leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点

							children:[{//添加子节点,如果服务器返回tl<i>.leaf为ture则孩子节点将无法显示

								text:'text',

								pid:'1',

								leaf:true

							}]

						});

					    node.appendChild(cnode);//将当前节点添加为待展开节点子节点

					}

				    

				},

				failure: function2 // 失败

			});

		}  

	}


	function function2(){


	}



	var viewport = new Ext.Viewport({

		layout:'border',

		items:[

		new Ext.BoxComponent({

			region:'north',

			el: 'north',

			height:35

		}),

		tree,

		tab

		]

	});


	tree.render();

	root.on('expand',gettree);//当根节点展开后触发gettree事件


});

  </script>

	</head>


	<body>

		<div id="north">

			<p class="api-title">

				tree

			</p>

		</div>

		<div id="west"></div>

		<div id="center2"></div>

		<div id="loading-mask" style=""></div>

		<div id="loading"></div>

	</body>

</html>


[

  {text:'aaa',id:'2',pid:'1',leaf:false,children:[

  	 {text:'叶子1',id:'01',pid:'2',leaf:true}	

  ]}

]

#6

打开chrome 按CTRL+Shift+J或者Firefox-->firebug
标签：

相关文章