ExtJs加载本地xml格式的数据

最新推荐文章于 2012-12-17 09:15:22 发布

wjt276

最新推荐文章于 2012-12-17 09:15:22 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs2.x 文章标签： XML EXT JavaScript HTML ViewUI

本文链接：https://blog.youkuaiyun.com/wjt276/article/details/83516608

ExtJs2.x 专栏收录该内容

33 篇文章

订阅专栏

本文介绍使用ExtJS框架通过XmlTreeLoader动态加载并展示本地XML格式数据的方法。具体实现包括配置TreePanel组件、设置TreeLoader加载器及事件监听等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <script type="text/javascript" src="ext/XmlTreeLoader.js"></script>
 <script type="text/javascript" src="xml-tree-loader.js"></script>

/**
	 * 动态加载本地xml格式的数据
	 */	
	var mytree_4=new Ext.tree.TreePanel({
		//el:"container",//应用到的html元素id
		animate:true,//以动画形式伸展,收缩子节点
		//title:"Extjs静态树",
		//collapsible:true,
		rootVisible:true,//是否显示根节点
		autoScroll:true,
		autoHeight:true,
		//height:'100%',
		width:'100%',
		lines:true,//节点之间连接的横竖线

		//树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组
		 loader: new Ext.app.BookLoader({
		//loader: new Ext.ux.tree.XmlTreeLoader({
			preloadChildren: true,//若为true，则loader在节点第一次访问时加载"children"的属性
			clearOnLoad: false,//（可选）默认为true。在读取数据前移除已存在的节点
	          dataUrl:'xml-tree-data.xml'
	     }),               		
		root: new Ext.tree.AsyncTreeNode({text:"根目录"}),
			
	       
		collapseFirst:false,
		//添加事件
		listeners : {
		//当点击时在右边主窗口中加载相应的资源
		click : function(node, e){
		alert(node.isLeaf());
					e.stopEvent();//停止href属性产品的链接操作(自动)
					if(node.isLeaf()){//如果是非叶子节点，则不用加载相应资源
						loadPanel(node);//加载叶子节点对应的资源
					}
				}
		}
	});

xml-tree-loader.js文件

Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
    processAttributes : function(attr){
		//alert(attr.leaf + attr.text);
        if(attr.class1){ // is it an author node?
			//attr.leaf = false;
			attr.text = attr.class1;
            // Set the node text that will show in the tree since our raw data does not include a text attribute:
           // attr.text = attr.first + ' ' + attr.last;

            // Author icon, using the gender flag to choose a specific icon:
            //attr.iconCls = 'author-' + attr.gender;

            // Override these values for our folder nodes because we are loading all data at once.  If we were
            // loading each node asynchronously (the default) we would not want to do this:
           attr.loaded = true;
            attr.expanded = true;
			
        } else if(attr.title){ // is it a book node?

            // Set the node text that will show in the tree since our raw data does not include a text attribute:
            attr.text = attr.title ;

            // Book icon:
           // attr.iconCls = 'book';

            // Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
            // but this example demonstrates that you can control this even when you cannot dictate the format of
            // the incoming source XML:
            attr.leaf = true;
        }
    }
});