`
wjt276
  • 浏览: 650476 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

ExtJs加载本地xml格式的数据

阅读更多
 <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;
        }
    }
});

 

分享到:
评论
2 楼 flyinghui2009 2011-03-08  
我这么写的怎么报错呢?
1 楼 cfwdl 2010-03-11  
js代码中的34行loadPanel(node);
最好发一下

相关推荐

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...

    Extjs之旅-combox之远程加载数据

    返回的数据格式应与我们在Store中定义的reader相匹配。 例如,对于JSON格式的响应: ```json [ {"id": 1, "name": "Option 1"}, {"id": 2, "name": "Option 2"} ] ``` 5. **触发加载**:当用户在Combox中输入时...

    Extjs4---combobox省市区三级联动+struts2

    这些方法可以返回JSON格式的数据,以便于ExtJS前端解析和填充到ComboBox中。使用Struts2的JSON插件可以轻松实现这一点。 配置Struts2的Action,我们需要在`struts.xml`中声明相关的Action映射,设置接收请求的URL和...

    ExtJS深入浅出介绍之数据存储于传输

    2. **XML和SOAP支持**:虽然JSON是最常用的数据格式,但ExtJS也支持XML和SOAP协议,以便与不支持JSON的后端系统通信。 3. **Direct**:Ext.Direct是一种高效的API调用机制,允许直接在客户端调用服务器端的方法。...

    extjs 分页

    1. Store:EXTJS中的Store是用来存储数据的容器,它可以连接到各种数据源,包括本地数组、远程JSON、XML等。Store内置了分页功能,通过配置`autoLoad`、`pageSize`等属性可以实现分页加载数据。 2. Grid:EXTJS ...

    ExtJs3.0中文文档

    12. **AJAX请求(Ajax Request)**:通过Ext.Ajax对象,可以发送XMLHttpRequest请求,处理JSON、XML等多种数据格式。 13. **数据包(Data Package)**:数据模型和数据包是ExtJS处理数据的核心,支持远程数据加载和...

    ExtJS 实用教程

    4. **Store与Model**:Store是数据存储的容器,它可以加载远程数据,如JSON或XML格式,也可以是本地数组。Model定义了数据的结构和规则,两者结合实现了数据的管理与展示。 5. **GridPanel**:ExtJS的GridPanel是...

    extjs数据存储与传输

    支持多种数据格式,如JSON、XML等。 3. **Proxy**:作为Store和数据源之间的桥梁,负责处理数据的获取和提交。提供了多种类型的Proxy,如AjaxProxy、MemoryProxy等,以适应不同的应用场景。 4. **Connection**:对...

    Extjs3.0 cookbook

    4. **数据存储(Data Store)**:EXTJS的数据存储组件可以与各种数据源进行交互,如XML、JSON等,支持远程和本地数据加载。 5. **表格(Grid)**:EXTJS的表格组件具有强大的功能,如排序、分页、行编辑等,适合...

    Extjs3 多选下拉框LovCombo

    数据源可以是JSON、XML或者其他格式。 2. **定义Model**:定义数据模型,指定哪些字段作为显示字段和值字段。 3. **配置LovCombo**:创建一个Ext.form.ComboBox实例,指定store、displayField、valueField等配置项...

    Extjs深入浅出pdf

    EXTJS 的数据层设计使得开发者能够灵活地处理数据,无论数据源是本地还是远程,格式是XML、JSON 或其他。理解并掌握这些知识点对于高效开发EXTJS 应用至关重要。通过深入学习EXTJS 的数据存储与传输,开发者可以更好...

    Extjs4 desktop

    数据可以通过Store与服务器进行交互,支持远程数据源如JSON、XML等。 2. **View(视图)**:视图层是用户看到和交互的部分,包括组件、面板、表格等。在ExtJS中,视图通过 xtype 或者直接定义组件实例来创建。在...

    Extjs+Gride使用方法

    1. **Store**: 存储数据的容器,可以是本地数据或者远程数据源(如JSON或XML)。Store负责加载、处理和管理数据。 2. **Model**: 定义数据字段和它们的数据类型,用于数据验证和转换。 3. **Column Model**: 定义...

    Extjs4 Combox tree

    例如,`displayField`定义显示的字段,`valueField`定义选中项对应的值,`store`用于设置数据源,可以是JSON、XML或者其他格式。`queryMode`可以设定为“local”或“remote”,分别处理本地数据和远程数据检索。 2....

    EXTJS教材,教程

    - **数据源**:EXTJS提供了`Ext.data.Store`来管理数据,它可以处理各种格式的数据(如Array、JSON、XML等)。`MemoryProxy`用于处理内存中的数据,而`ArrayReader`则解析数组数据,定义每个元素对应的属性名。 3....

    ExtJs教程_完整版.pdf

    - **示例**: 创建一个动态加载数据的表格或表单,无需刷新整个页面即可更新数据。 #### 六、多语言支持 **6.1 多语言实现** - **语言包**: ExtJS支持多语言,可以通过语言包实现多语言界面的支持。 - **本地化**:...

    ExtJs的增删改查功能

    数据源可以是JSON、XML或者其他格式,ExtJs有内置的Proxy类来处理不同数据格式的响应。同时,可以使用`store.getAt(index)`或`store.getById(id)`方法获取特定的记录。 3. **更新(Update)** 更新记录通常涉及...

    ExtJs3.1目前所有例子源代码

    - **Store**:Store是数据管理的核心,它可以连接到各种数据源,如JSON、XML或Ajax请求,负责加载、存储和更新数据。 - **Proxy**:Store通过Proxy与数据源交互,支持远程和本地数据操作。 - **Model**:定义数据...

    ExtJs运行环境

    在4.2.1版本中,ExtJs提供了强大的数据包,支持远程数据加载和本地存储。 7. **配置文件**:例如`app.json`,用于描述应用程序的结构,包括各模块和视图的路径。 8. **构建工具**:如Sencha CMD,这是一款命令行...

Global site tag (gtag.js) - Google Analytics