ExtJs2.0学习系列(13)--Ext.TreePanel之第二式

昨天有朋友说,在IE下有的时候ashx传过来的节点不能加载,其实我也出现这样的问题,很是烦人!

今天extjs上看到了一个解决方案,觉得很好:如果treeLoader加载失败,会继续加载,直到成功加载。

4.解决IE下非正常加载节点问题

即使从服务器取到大量的数据,也没有问题。



基本代码一样,只有js代码的loader小小的修改下:

loader:new Ext.tree.TreeLoader({                url:"json.ashx",                listeners:{                    "loadexception":function(loader,node,response){                        node.loaded = false;                        node.reload.defer(10,node);//不停的加载,直到true                     }                }       })

5.使用TreeNodeUI

在node中我们可以用专门的类控制node的UI.

//TreeNodeUI的基本配置参数,node.getUI()=>TreeNodeUI
1.addClass("class")//添加css类
2.getAnchor()//返回a元素(对象),控制a链接
3.getIconEl()//返回img元素(对象),控制icon图标
4.getTextEl()//返回span元素(对象),控制节点文本
5.hide()
6.show()
7.removeClass()

我们来做个例子,不过我先推荐个网站extjs中文社区,感觉就是内容太少了

例子:动态改变节点的icon图标

关键js代码:

//以根节点为例
root.on("click",function(node){
   node.getUI().getTextEl().innerHTML="点击后";//a元素(对象)
   node.getUI().getIconEl().src="Image/add.gif";//img元素(对象)
  });

效果图:

再来看看节点node.getUI().getTextEl()到底是什么?firebug下,


node.getUI().getIconEl()的内容:


其他类似.

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索对象
, node
, 节点
, 元素
, treepanel
, 控制
, getui
ext.TreePanel
,以便于您获取更多的相关知识。

时间: 2024-11-05 12:24:17

ExtJs2.0学习系列(13)--Ext.TreePanel之第二式的相关文章

ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树 效果图: html代码: <div id="container"> </div> js代码: Ext.onRea

ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)

继续tree的learn! 今天就来个可增删改的树吧,操作数据库就使用比较方便的Linq,无非就是增删改! LinqData.dbml: html代码: <body> <div id="container" style="float:left; margin-right:10px;"> </div> <iframe name="mainFrame" id="mainFrame" src

ExtJs2.0学习系列(10)--Ext.TabPanel之第二式

上一篇种我们简单的了解了下tabpanel 下面我们要介绍的是,如何动态的添加标签页! 2.动态添加tabpanel的标签页 效果图: 点击"添加新标签页",会添加一个标签页,而且激活这个新的标签页. html代码: <body style="margin:10px;"> <div> <a id="AddNewTab" href="javascript:void(0)">添加新标签页<

ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去,说全一点,说深一点. 3.可选的fieldset实例 其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点: //因为觉得这个参数特别,特举一例以说明 1.checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false 2.checkboxName:string//当上面为true

ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)

前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉及 到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵! 5.服务器数据作为ComboBox的数据源实例 首

ExtJs2.0学习系列(2)--Ext.Panel

上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢! 今天介绍extjs中的Panel组件. //html代码 <div id="container"> </div> //js代码 var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮,设为false则不显示 renderTo:

ExtJs2.0学习系列(3)--Ext.Window

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window组件,它继承自panel. 先介绍个最简单例子 //html代码 <div id="win" class="x-hidden"> </div> //js代码 var w=new Ext.Window({ contentEl:"win",//主体显示的html元素,也可以写为el:"win" width

ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)

N久没有写extjs的,作为一个新手,我为我的这种懒惰行为感到惭愧! 鉴于有朋友反应前面的文章过于简单,我决定以后的文章如果没有闪光点就放在新手区(如果不适合,请跟帖),不放在首页! 11.checkbox简单示例 效果图: js代码: Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:330, layout:"form", labelWidth:

ExtJs2.0学习系列(1)--Ext.MessageBox

大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章. 个人认为用extjs做后台很不错,布局比较完美! 1.Ext.MessageBox.alert()方法 有四个参数,为简单起见,主要介绍前面三个参数: alert( title , msg , function(){} ) 其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发. Ext.MessageBox.alert("title","msg&qu