`
kanpiaoxue
  • 浏览: 1789330 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Ext.tree.TreeLoader传参数以及异步加载

 
阅读更多
var westObj = new Ext.tree.TreePanel({
			region : 'west',
			id : 'aphyciniTree',
			collapsible : true,
			animate : true,
			enableDD : true,
			title : '<div>aphycini note</div>',
			width : 300,
			autoScroll : true,
			split : true,
			// loader : treeLoader,
			loader : new Ext.tree.TreeLoader({
				dataUrl : basePath + 'web/aphycini/getAphyciniTree',
				baseParams : {
					condition : ''
				}
			}),
			root : new Ext.tree.AsyncTreeNode({// 树根
				id : '-1',
				text : 'aphycini note',
				iconCls : 'treeNodeStyle',
				expanded : true,
				leaf : false
			}),
			rootVisible : true,// 根节点的可见性
			listeners : {
				click : function(node) {
					alert(node.attributes.id)
				}
			},
			tbar : [
					'->',
					new Ext.form.TextField({
						id : 'queryConditon',
						emptyText : '请输入查询条件',
						width : 200
					}),
					'-',
					{
						text : '搜索',
						iconCls : 'queryStyle',
						handler : function() {
							var condition = $.trim(Ext.getCmp('queryConditon')
									.getValue());
							// alert(condition)
							var aphyciniTree = Ext.getCmp('aphyciniTree');
							var loader = aphyciniTree.getLoader();
							loader.on('beforeload', function(loader, node) {
								this.baseParams.condition = condition; // 通过这个传递参数,这样就可以点一个节点出来它的子节点来实现异步加载
							}, loader);

							loader.load(aphyciniTree.root);
							Ext.getCmp('aphyciniTree').expandAll();

						}
					} ]
		});

 

分享到:
评论
1 楼 隐身人 2014-09-09  
       

相关推荐

    Ext.tree.TreeLoader附带封装的json类

    `Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    `PagingTreeLoader.js`文件中包含了`PagingTreeLoader`类的实现,它继承自`Ext.tree.TreeLoader`,并添加了分页相关的逻辑。这个文件是这个功能的核心,通过分析和调试这个文件,你可以更深入地理解其内部机制。 在...

    extTree例子点击出现等

    ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 ...

    Extjs4树结构异步加载

    4. **TreeLoader**: TreeLoader是处理节点异步加载的工具,它接收一个配置对象,其中包括`dataUrl`(用于获取子节点数据的URL)和其他可选参数,如`params`(请求时传递的额外参数)。 5. **事件监听**: 当用户展开...

    extJs 2异步树 源程序.

    在这款框架中,异步树(Asynchronous Tree)是一种重要的组件,它允许开发者动态加载树形结构的数据,提高网页性能,尤其是在处理大量数据时。异步树通常与JSON(JavaScript Object Notation)数据格式结合使用,以...

    ext生成树节点带链接

    这里定义了一个`TreePanel`,它使用`AsyncTreeNode`作为根节点,并配置了异步加载器(`TreeLoader`),该加载器指向了一个XML文件,该文件包含了树形菜单的具体数据。 #### 4. 添加链接及事件处理 为了让树形菜单中...

    exxtjs4.0中树的用法

    例如,通过`TreeStore`,可以方便地实现异步加载数据,以及利用数据绑定机制与后台进行实时同步。对于事件处理,`itemclick`提供了更多的信息,可以更好地控制用户交互。 总结来说,EXTJS 4.0中的树形组件主要变化...

    ExtJS3 实现异步下拉树

    4. **TreeLoader**:负责实际的异步加载操作,它会触发Ajax请求获取子节点。可以配置`nodeParam`属性,告诉服务器请求的是哪个节点的子节点。 5. **UI 自定义**:因为下拉树需要与下拉框结合,所以可能需要自定义`...

    EXTJS开发总结.pdf

    2. `Ext.tree.TreeLoader`用于加载树形结构,服务器需返回符合`Ext.tree.TreeNode`配置要求的JSON数据。 3. `Ext.data.Store`及其子类处理表格数据,服务器可返回JSON或XML,推荐使用JSON格式。 4. `Ext.Element....

    JSP EXT 遍历 TREE

    EXT的TREE组件通常与JSON数据源配合使用,通过异步加载或者一次性加载所有数据来构建树结构。这个文件可能包含了节点ID、父节点ID、节点文本等信息,EXT的`TreeStore`会解析这个JSON数据并填充到TREE中。 最后,...

    ext2.0+dwr 实现的动态树

    总的来说,利用Ext2.0和dwr(Direct Web Remoting)实现动态树,需要理解`TreePanel`、`TreeNode`和`TreeLoader`的使用,以及如何配置异步加载和处理服务器端数据。通过这种方式,我们可以创建出具有高性能、可扩展...

    JavaScript的ExtJS框架中数面板TreePanel的用法实例解析_.docx

    另一种是异步加载子节点信息的树节点,即`Ext.tree.AsyncTreeNode`,这种节点在初始加载时不包含所有子节点,只有在需要时才从服务器请求数据。 创建TreePanel的基本步骤如下: 1. 首先,我们需要定义一个数据存储...

    Extjs开发总结(转).pdf

    它不绑定特定的服务端技术,而是通过各种方式与服务端通信,如使用`Ext.Ajax.request`进行普通异步请求,`Ext.tree.TreeLoader`加载树形数据,`Ext.data.Store`加载表格数据,以及`Ext.Element.update`进行局部页面...

    ext实现动态树

    首先,我们需要创建一个`TreeLoader`对象,该对象用于异步加载树的数据。这里我们定义了数据加载的URL: ```javascript var treeLoader = new Ext.tree.TreeLoader({ dataUrl: "TreeServlet.do" }); ``` 其中`...

    Ext Tree示例

    在 Ext Tree 中,XML 数据通常通过 `TreeLoader` 组件加载,这个组件知道如何解析 XML 并构建树的节点。 `trs.js` 文件可能是另一个 JavaScript 示例,它可能包含了自定义的树操作或者扩展了默认的树行为。例如,它...

    ExtJS对Ajax的支持

    类似地,对于Tree控件,可以使用DWR TreeLoader来异步加载树结构数据。这使得树的加载过程更加高效和流畅,特别是在数据量较大时。 ##### 2.3 DWRProxy和ComboBox DWRProxy可以与ComboBox控件结合使用,实现实时...

    EXTJS开发总结[参考].pdf

    2. `Ext.tree.TreeLoader`:用于加载树形结构数据,服务器需返回符合`Ext.tree.TreeNode`配置要求的JSON数据。 3. `Ext.data.Store`及其子类:用于加载表格数据,推荐返回JSON格式,但也可支持XML。 4. `Ext.Element...

Global site tag (gtag.js) - Google Analytics