<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;
}
}
});
分享到:
相关推荐
动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...
返回的数据格式应与我们在Store中定义的reader相匹配。 例如,对于JSON格式的响应: ```json [ {"id": 1, "name": "Option 1"}, {"id": 2, "name": "Option 2"} ] ``` 5. **触发加载**:当用户在Combox中输入时...
这些方法可以返回JSON格式的数据,以便于ExtJS前端解析和填充到ComboBox中。使用Struts2的JSON插件可以轻松实现这一点。 配置Struts2的Action,我们需要在`struts.xml`中声明相关的Action映射,设置接收请求的URL和...
2. **XML和SOAP支持**:虽然JSON是最常用的数据格式,但ExtJS也支持XML和SOAP协议,以便与不支持JSON的后端系统通信。 3. **Direct**:Ext.Direct是一种高效的API调用机制,允许直接在客户端调用服务器端的方法。...
1. Store:EXTJS中的Store是用来存储数据的容器,它可以连接到各种数据源,包括本地数组、远程JSON、XML等。Store内置了分页功能,通过配置`autoLoad`、`pageSize`等属性可以实现分页加载数据。 2. Grid:EXTJS ...
12. **AJAX请求(Ajax Request)**:通过Ext.Ajax对象,可以发送XMLHttpRequest请求,处理JSON、XML等多种数据格式。 13. **数据包(Data Package)**:数据模型和数据包是ExtJS处理数据的核心,支持远程数据加载和...
4. **Store与Model**:Store是数据存储的容器,它可以加载远程数据,如JSON或XML格式,也可以是本地数组。Model定义了数据的结构和规则,两者结合实现了数据的管理与展示。 5. **GridPanel**:ExtJS的GridPanel是...
支持多种数据格式,如JSON、XML等。 3. **Proxy**:作为Store和数据源之间的桥梁,负责处理数据的获取和提交。提供了多种类型的Proxy,如AjaxProxy、MemoryProxy等,以适应不同的应用场景。 4. **Connection**:对...
4. **数据存储(Data Store)**:EXTJS的数据存储组件可以与各种数据源进行交互,如XML、JSON等,支持远程和本地数据加载。 5. **表格(Grid)**:EXTJS的表格组件具有强大的功能,如排序、分页、行编辑等,适合...
数据源可以是JSON、XML或者其他格式。 2. **定义Model**:定义数据模型,指定哪些字段作为显示字段和值字段。 3. **配置LovCombo**:创建一个Ext.form.ComboBox实例,指定store、displayField、valueField等配置项...
EXTJS 的数据层设计使得开发者能够灵活地处理数据,无论数据源是本地还是远程,格式是XML、JSON 或其他。理解并掌握这些知识点对于高效开发EXTJS 应用至关重要。通过深入学习EXTJS 的数据存储与传输,开发者可以更好...
数据可以通过Store与服务器进行交互,支持远程数据源如JSON、XML等。 2. **View(视图)**:视图层是用户看到和交互的部分,包括组件、面板、表格等。在ExtJS中,视图通过 xtype 或者直接定义组件实例来创建。在...
1. **Store**: 存储数据的容器,可以是本地数据或者远程数据源(如JSON或XML)。Store负责加载、处理和管理数据。 2. **Model**: 定义数据字段和它们的数据类型,用于数据验证和转换。 3. **Column Model**: 定义...
例如,`displayField`定义显示的字段,`valueField`定义选中项对应的值,`store`用于设置数据源,可以是JSON、XML或者其他格式。`queryMode`可以设定为“local”或“remote”,分别处理本地数据和远程数据检索。 2....
- **数据源**:EXTJS提供了`Ext.data.Store`来管理数据,它可以处理各种格式的数据(如Array、JSON、XML等)。`MemoryProxy`用于处理内存中的数据,而`ArrayReader`则解析数组数据,定义每个元素对应的属性名。 3....
- **示例**: 创建一个动态加载数据的表格或表单,无需刷新整个页面即可更新数据。 #### 六、多语言支持 **6.1 多语言实现** - **语言包**: ExtJS支持多语言,可以通过语言包实现多语言界面的支持。 - **本地化**:...
数据源可以是JSON、XML或者其他格式,ExtJs有内置的Proxy类来处理不同数据格式的响应。同时,可以使用`store.getAt(index)`或`store.getById(id)`方法获取特定的记录。 3. **更新(Update)** 更新记录通常涉及...
- **Store**:Store是数据管理的核心,它可以连接到各种数据源,如JSON、XML或Ajax请求,负责加载、存储和更新数据。 - **Proxy**:Store通过Proxy与数据源交互,支持远程和本地数据操作。 - **Model**:定义数据...
在4.2.1版本中,ExtJs提供了强大的数据包,支持远程数据加载和本地存储。 7. **配置文件**:例如`app.json`,用于描述应用程序的结构,包括各模块和视图的路径。 8. **构建工具**:如Sencha CMD,这是一款命令行...