对web应用效率提升的一些经验及疑问

1. 对dom节点的使用:

    尽量避免使用dom对象,大家都知道对dom树的遍历非常耗费资源,因此如果需要重复使用时,将dom对象存在一个js的变量中,然后对这个变量进行使用,避免每次使用dom节点时对dom树的遍历,切记,在使用完对dom对象引用的变量后要将其置为null,否则你会发现内存的占用率有增无减,直到你关闭了浏览器为止。

2. 对eval函数的使用:

     在使用eval函数时,会增加了对eval函数中代码解析的过程,而这个解析的过程是非常耗费资源的,因此,尽量避免使用eval函数,如果非用不可,也要尽可能的减少eval解析的代码量,将需要执行的代码提取到一个方法内,eval只解析这个函数名来提高eval的效率,可以通过以下的示例进行比较:

    方法一:

eval("for(var i = 0; i < 10000000; i ++) { var str = 'test' + i }");

      方法二:

var test = function() { 
    for(var i = 0; i < 10000000; i ++) {
        var str = 'test' + i; 
    } 
} 
var testFun = eval('test'); 
testFun(); 

3. try-catch的使用:

    尽量把try-catch语句放在循环外边。

4. 全局变量的使用:

     全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚本引擎需要搜索整个全局命名空间。

5. 压缩合并js和css文件:

     这方面的优化估计很多人都做过,现在有好多JS和CSS压缩和混淆的工具,如yahoo的yui-compressor.jar,在页面完全使用Ext等js框架开发时压缩和混淆JS对效率提升尤其明显。

6. 异步请求中GET与POST的选择:

     大家都知道用GET方式来发送HTTP请求效率要远远高于POST请求,但是出于安全的考虑,这里需要慎重选择请求方式,可以参考我的另外一篇文章。

 

——————————————————————————————– 

 

另外,还有一些开发过程中的细节也会对效率提升起到一定得作用:

1. 不要使用with语句

2. str += “aaa”; str += “bbb”; 效率大于 str = “aaa” + “bbb”;

3. 原生的态的写法效率大于函数,如:

    a > b   a : b; 效率大于 Math.max(a, b);

    array[array.length] = obj; 效率大于 array.push(obj);

4. 对数组进行遍历时,先把数组的长度保存在变量中

for(var i = 0, len = array.length; i < len; i ++) { 
    // 遍历数组 
}

5. innerHTML方法效率大于createElement()/appendChild()方法

6. 尽量减少图片链接个数,减少对带宽的耗费

 

——————————————————————————————–

 

目前还在对以下几方面的优化进行分析和研究,都是本机测试,基本可以忽略网络问题,希望高人可以进行指点:

1. ajax以POST方式发送异步请求时的性能优化

    现状:用HTTPWATCH检测时,SEND时间过长,有时竟然会超过0.8秒,传输量并不大,   

    请求信息:

    Content-Type : application/x-www-form-urlencoded;charset=UTF-8

    Content-Length : 133 (10个字符串参数)

2. 在接收response的content时的性能优化

    现状:用HTTPWATCH监测时,RECEIVE时间过长

    response信息:

    HTTP/1.1 200 OK

    Server : Apache-Coyote/1.1

    Content-Type : text/plain;charset=UTF-8

    Content-Length : 4147

3. 在多个请求之间会有延时,如第一个请求完成之后会有零点几秒的延时才会进行下一个请求,那么这个延时的时间可以进行优化吗?这个延时的时间到底是在做什么呢?执行javascript代码?还是请求的等待队列?

希望高人可以指点,先行谢过!

 

EXT学习资料

之前用过YUI 但是害怕CSS 知道EXT不需要写太多的CSS,哈哈就打算学习下EXT,后来由于忙也忘了学习。

可能以后会很少使用EXT了。所以把之前的学习资料发出来分享下,方便以后学习的人使用。其实最好的学习方式是去官方网站看列子,英文不好的可以看下我这个学习的word,也是别人发给我的。永远记得一句话 分享快乐。

使用ant和YUICompressor压缩jscss

用到两个jar包

YUIAnt.jar  下载地址 http://www.ubik-ingenierie.com/miscellanous/YUIAnt/

yuicompressor-2.4.2.jar 下载地址http://www.julienlecomte.net/yuicompressor/

ant的够建脚本

<property name="context" value="${basedir}\context"/>
	<path id="yuiClasspath">
		<fileset dir="${webinf}/lib">
			<include name="yuicompressor-2.4.2.jar"/>
			<include name="YUIAnt.jar"/>
		</fileset>
	</path>

	<target name="compres-js-css" description="压缩 js css 文件">
		<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
			<classpath>
				<path refid="yuiClasspath"/>
			</classpath>
		</taskdef>
		<yuicompress linebreak="300" warn="false" munge="yes" 
			preserveallsemicolons="true" outputfolder="${context}">
			<fileset dir="${context}">
				<include name="js/**/*.js" />
				<include name="lib/**/*.js"/>
                                <include name="fckeditor/**/*.js"/>
				<include name="css/**/*.css"/>
				<include name="lib/**/*.css"/>
                                <include name="fckeditor/**/*.css"/>
			</fileset>
		</yuicompress>
	</target>

运行ant后回将原来的js和css覆盖掉

如果不想覆盖 可以设置outputfolder

YAHOOYUI3简单入门

Yui 3的简单用法:

一、调用方法:

既然我们是使用的Yui这个js库,那么肯定第一步就是引用这个文件,刚才在上面已经说了我们要使用的是yui-min.js这个文件,当然你可以对他进行改名,你只需要到你下载的yui库的文件中找到他,将其拷到你需要的目录就OK啦,那么掉用方法的是:

在之间插入以下代码:

<script src=”yui-min.js” type=”text/javascript”></script>注意:src后面的地址请根据实际情况填写,当然你也可以使用官方提供的地址,请看: <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=”text/javascript”></script>

我个人觉得如果你仅仅想试一下yui的功能,可以用用官方的地址,免得自己下载啦,嘿嘿!

二、实现我们的功能

当我们已经调用好Yui这个js库以后,接下来就得看我们自己的了,如何通过Yui来实现我们想要的功能呢,嘿嘿,请看:

1、Yui 3最基本的使用格式:

YUI().use(”node”, function(Y) {

// 书写你的js代码

});

就是要使用Yui 3提供的方法,就必须得将他们写在上面这个大括号之内,不然无法使用。

2、Yui 3获取对象的方法:她获取对象的方法有很多种,下面我们来看看常用的几种方法:(在使用这些方法的时候都需要在方法前加Y)

a、get()方法

get方法获取id和class对象的方法:Y.get(”#id”);Y.get(”.class”);

注意,在括号中必须用引号将他们引起来,看看,如果你对CSS很熟悉的话,就应该知道,我们在为id书写样式的时候前面用的是#,为class书写 样式的时候前面使用的是.号。在Yui 3的get方法中也是这样的。那么get方法获取到的都是单个对象,还有就是如果你又想获取一个对象,他又有Id又有class的呢,那也可以使用get 方法:Y.get(”#id”).get(”.class”);这样就可以啦。

b、all()方法

刚才我们看了get方法获取的都是单个对象,那如果我们想获取所有据有相同class的属性的对象怎么办,哈哈,不要急,Yui想到了,他提供了很 多种方法,但是我觉得最简单的一种方法就是:Y.all(”.calss”);这样就可以获取到了所有据有class名称的class的对象,注意,这里 得到是一个数据。

3、addClass()

这个一看,就应该明白了吧,我们经常在js中都可能用到的为一个对象增加class,哈哈,在这里我们可以使用它啦,使用方法就是:myNode.addClass(’foo’);

4、styles()

光有了设置class还不行,因为有时候我们还需要设置对象的style值,故而引入了styles()方法,使用方法:myNode.setStyle(’opacity’, 0.5);

5、Yui事件监听函数:

Y.on(事件,函数,对象);

如果你对js比较熟悉的话,你应该清楚,js中有事件监听函数,但是IE和DOM是有区别的,注意,Opera支持IE和DOM的两种监听函数,以 前为了兼容多个浏览器,我们需要单独写一个兼容的函数,而在Yui3不需要,如果你想使用的话,可以直接使用Y.on(事件,函数,对象);

事件分为多种,一般我们经常用到的是鼠标与键盘:

鼠标:click,dblclick,mouseover,mousedown,mousemove,mouseup

我们只需要将相应的事件用引号包起来填入事件的值就行了。还有就是这里的对象可以接受单个的对象,他还可以接受数组,比如单个的id,我们可以使 用#id,也可以设置id下的标签,#id li,还可以使用为多个对象设置,就是上面说到的是数组方式[“#id”,”#id1″]依次类推。

yui不仅仅只有这几个方法的,还有很多,比如 set,get,appendChild,test,removeClass,getXY,getX,gety还有很多很多,

Related Articles

使用YUICompressor压缩CSS/JS

JS/CSS文件大,用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢,有的甚至由于CSS的文件而造成页面初始打开很凌乱。

我们怎么提高用户下载JS/CSS的速度呢?

1、我们无法改变用户的网络状况,只有自己网站使用更快的带宽或者使用更强的服务器,使用户访问我们的时候感觉很快。

2、对JS/CSS文件进行压缩,由于文件较小,用户下载的时间就很短。

解决方案1,需要花费比较多的money,方案2实现比较简单,而且效果也明显。

下面我们介绍使用YUI Compressor进行JS/CSS压缩

1、下载yuicompressor http://www.julienlecomte.net/yuicompressor/

2、使用ant编译得到yuicompressor-x.y.z.jar的包,进入yuicompressor-x.y.z目录运行ant -f build.xml

3、在build目录下得到yuicompressor-x.y.z.jar的包,使用java -jar yuicompressor-2.4.2.jar in.js -o out.js

看下out.js的源文件就会发现去掉了注释空格等信息。

更多yui compressor的帮助请查看 http://www.julienlecomte.net/yuicompressor/README

 

写了一个js,css压缩混淆的开源桌面软件,请大家拍砖

JsCompressor,主要用来压缩、混淆JS(Javascript)与CSS,基于YUI Compressor,目的是方便不熟悉Java或者不喜欢命令行方式进行压缩的Web开发者使用。 

功能:
1,可压缩、混淆整个目录(包括子目录)下的JS或者CSS文件,在同一个文件夹内生成*.min.js或者*.min.css。
2,压缩、混淆、合并所有js或者css到一个文件,在当前选择的文件夹下自动生成allinone.min.js或者allinone.min.css。
3,能上下调整顺序、移除后再进行压缩
4,能自动记住上一次压缩的文件夹及启动时打开待压缩文件列表

当前版本3.0,已经可以支持Windows和linux两个平台。

windows sreenshot

<linux-ubuntu 11.04>

linux screenshot

 

下载windows版:
https://github.com/downloads/tinyms/jscompressor/JsCompressor.exe

下载ubuntu(11.04)版:
https://github.com/downloads/tinyms/jscompressor/JsCompressor3.bin.ubuntu11.04.tar.gz 

其它Linux平台:
https://github.com/downloads/tinyms/jscompressor/JsCompressor3.src.tar.gz 
解压后make,需要libgtkmm-dev支持,如果没有安装此包,make前先下载安装。

最后的建议是,js或者css文件尽量用utf-8编码,还有此软件暂不支持压缩如ExtJS一样大的框架,主要是文件太多了。

重置默认样式cssreset分享

最近看到一个词叫css reset。什么叫做css reset呢?我理解为重置css,也就是重置默认样式。我在HTML下的默认样式
中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset)。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章,
 可以看看国外使用css reset的比例调查。

 

这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看。
译文地址查看

原文地址查看

接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css reset怎么写的?

淘宝
www.taobao.com
):

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}

百度有啊
(www.youa.com
):(架构基本上是模仿YUI来做的)

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

《超越css》
一书中建议我们做网站开始重置所有默认样式:

/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}

/* Removes list-style from lists */
ol,ul { list-style:none }

/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }

/* Removes border from fieldset and img */
fieldset,img { border:0 }

/* Left-aligns text in caption and th */
caption,th { text-align:left }

/* Removes quotation marks from q */
q:before,q:after { content:”}

那我们实际写代码的时候该怎么来css reset呢?
我个人推荐使用(Eric Meyer
YUI
)的 css reset

Eric Meyer’s Reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: ”;
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

YUI:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {   
     margin:0;  
     padding:0;  
 }
 table { 
     border-collapse:collapse;  
     border-spacing:0;  
 }
 fieldset,img {   
     border:0;  
 }
 address,caption,cite,code,dfn,em,strong,th,var { 
     font-style:normal;  
     font-weight:normal;  
 }
 ol,ul { 
     list-style:none;  
 }
 caption,th { 
     text-align:left;  
 }
 h1,h2,h3,h4,h5,h6 { 
     font-size:100%;  
     font-weight:normal;  
 }
 q:before,q:after { 
     content:”;  
 }
 abbr,acronym { border:0;  
 } 

结合他们的css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。

DouglasCrockford新文《FixingHTML》

Well, 我们亲爱的JS God—Douglas Crockford有新货到了:《Fixing HTML》,针对HTML 5的标准老人家谈了谈他自己的想法,在 http://www.crockford.com/html/

欢迎讨论。

《Fixing HTML》-Douglas Crockford 2007-11-28-

HTML需要修正了。HTML4的推荐建议发布于1999年。从那时起,web已经从一个文档传发系统演变成为一个应用程序传送的通道。得益于web开发社区的集体智慧和JavaScript表现出来令人意外的威力,我们已经迈出了相当的步伐,但也出现了一些限制,让HTML无法引领下一轮的革命。它不能不说是一种障碍。

HTML里面有不少好的想法,却在XHMTL标准中遭到弃舍。我的想法是我们应先回溯一下旧有方案,并重新给予关注。HTML的问题不在用更臃肿和更复杂的方式来代替,而是把这些功能的优点归纳出来,-尽管现存的功能有不少问题。

HTML演变成为应用程序传输通道的同时亦应保留其扮演一种文档格式之角色。

我提议的新语言草案并不完全兼容HTML4。HTML4也不是完全兼容HTML3,XHTML就更是没有兼容过其它,-所以这不是问题。

我的草案是相对友好、相对平缓的HTML5:

HTML

<html>标签有了一个可选的版本属性。如果该值是5,那么应遵从HTML5的规则。如果是4或没有这个值,那就是HTML 4的规则。

<html version=5>

无须doctypes

脚本Script

只允许一种脚本在页面内。这能为将来加入新浏览器语言作出简化,减少相关的统一对象模型和内存模型。这也是出于以一个安全的程序语言来代替JavaScirpt的目的。如果一种不安全的语言和一种安全的语言混合在一起是没有安全性可言的。语言是由 content-script-type来指定。默认是application/ecmascript。

<meta http-equiv=content-script-type content=application/ecmascript>

<script>不指定一个type或language。他们是<head>或<body>直接的子元素。<script>不会被立即执行。<script>不阻止其它资源的加载。当到达</head>时,所有在head部分的脚本会一一照顺序被执行。当到达</body>时,所有在body部分的脚本会一一照顺序被执行。

无须document.write。无须页内事件句柄。无须javascript: urls。

Frames

无须framesets、frames、或iframes。 这些属性的安全性都是有问题的。而取而代之的是“模块(modules)”。

模块Modules

<module>建立了一个包含通讯通道文档的sub-tree。参阅http://json.org/module.html的说明。我推荐Google的Gear和Adobe AIR这些更常见的通讯机制来代替<module>的这种机制。

CSS

默认的CSS内容需要标准化。参阅http://developer.yahoo.com/yui/reset/的例子,浏览器应该将默认的样式尽量公共化。

getElementsByCSSSelector方法可允许基于CSS选择符的标记来收集元素。

CSS方面有许多需作出重大的改进,当中的内容已经超越了本文的范围。CSS也应稍加关注便可得到改善。可在一个制约的环境内,针对对齐、布局、和屏幕排版几个方面上更智能地改善CSS。

编码 Encoding

HTML 5只允许一种字符编码就是UTF-8。默认的多语言The allowance of a multitude of encodings with default and discoveredencodings exposes users to security exploits and reduces the integrityof documents.

声明编码和文档本身保存的编码不匹配,这种情况虽较少见,但单使用一种编码方式就能很好地避免这问题。The expansion of asian text can be mitigated by gzipping.(亚洲系的语言需要而外gzip???不是太明白)

实体 Entities

HTML 5是严格按照HTML实体形式陈述的。在过去,一些浏览器往往允许各种实体古怪的写法出现,把用户暴露在不安全的范围。浏览器过于自觉地把有害的内容显示出来,从而导致一系列的安全攻击发生。

空白的标签 Empty Tags

标签<empty/>的形式是允许的,但<br>或<hr>就不一定要求。<script src=”url”/>标签亦可使用这种形式。

自定义标签Custom Tags

HTML总是允许自定义HTML标签的。HTML5就是第一公民的类。

CSS可用于自定义的样式标签。

mymenubar {display: div; width: 100%;}

Display的样式属性可作用于一个标签名字。这意味着当定义一个新的自定义标签时要分析那个标签的特征。

getElementsByTagName方法可用于收集自定义标签。

自定义属性Custom Attributes

HTML总是允许自定义HTML属性的。HTML5就是第一公民的类。

getElementsByAttribute方法可用于收集自定义标签。它需要一到两个的参数。第一参数是属性的名称。第二个可选的参数是匹配的值。

属性值只是数字,字母和特殊字符:+ – * % . : _:时不一定需要加引号,但引用(Quoting)仍然是好的实践

就是这些

这几个方面着重于HTML应用程序的可靠性、安全性和性能上的改进,同时简洁性降低了web开发者的学习曲线。这些都可以整理成为Ajax开发的最佳实践,扩展了新功能而无须更复杂。第四版本的HTML是一次归纳并有所精简,使得浏览器上的实现更加直接明了。这对移动设备尤其重要,因为电池的容量很难满足复杂平台的运算。这里唯一新的功能只是module,针对安全问题方面的。Modules使得mashups更加地安全。

CSSbugsinalpha3rev4?-ExtJS

When I`m trying to run the TreePanel examples I get allot of warnings related to the ext-all.css

when I`m looking at ext-all.css with IDE I also get numerous warnings like:
unknown property ‘text-overflow’ line 37
unknown property ‘filter’ line 213

and many more.

Is this known  Is it OK 

The TreePanel examples run locally worked in alpha3 rev 1 but looks strange with rev 4.

Thanks

Reply With Quote

 
#2  

Old

03-15-2007, 04:29 PM

Default

Turn off CSS warnings in firebug.

Reply With Quote

 
#3  

Old

03-15-2007, 04:31 PM

Default

OK

And what about the TreePanel examples  Is this known 

Reply With Quote

 
#4  

Old

03-15-2007, 06:38 PM

Default

Are those just IE-specific CSS entries 
__________________
Tim Ryan – Ext JS Support Team
Read BEFORE posting a question / posting a Bug
Use Google to Search – API / Forum
API Doc (3.x | 2.x | 1.x) / FAQ / Wiki / Tutorials / 1.x->2.0 Migration Guide

Reply With Quote

 
#5  

Old

03-15-2007, 06:59 PM

Default

It’s hard to say, but “looks strange” isn’t very helpful when figuring out the problems.

Reply With Quote

 
#6  

Old

03-15-2007, 07:09 PM

Default

The screenshoot:

http://www.flickr.com/photos/7345058@N02/422165267

The icons are all messed up.

I just run the examples localy. Didn`t tuch it.

Reply With Quote

 
#7  

Old

03-15-2007, 07:20 PM

Default

Ironically, this was asked and answered today in the Help forum.

http://yui-ext.com/forum/viewtopic.php t=3955

Reply With Quote

 
#8  

Old

03-15-2007, 08:18 PM

Default

If I`m running it locally, could you give me the lines I need to write 

I`m trying to run the example tree/reorder.html

and the s.gif file is at \resources\images\default

and where should I put thus extra lines 

When I`ll want to run it from a server should I change the lines 

Thanks

Reply With Quote

 
#9  

Old

03-15-2007, 08:23 PM

Default

If I`m running it locally, could you give me the lines I need to write 

I`m trying to run the example tree/reorder.html

and the s.gif file is at \resources\images\default

and where should I put thus extra lines 

When I`ll want to run it from a server should I change the lines 

Thanks

Reply With Quote

TreePanelnotfunctioning-ExtJS

The TreePanel was broken by me yesterday doing clean up. I have uploaded a new zip (same location) with a hot fix.

Sorry for any inconvenience.

Reply With Quote

 
#2  

Old

02-19-2007, 12:10 PM

Default

Thanks a lot, that fixed the problem I had with closing branches 8)

Reply With Quote

 
#3  

Old

02-19-2007, 01:05 PM

Default

i have the examples local running, the tree expamples dont show me the tree-pics (s.gif).
Under the pic property in firefox the pic url ist yui-ext.com/s.gif.
Anyone with the same problem 

Reply With Quote

 
#4  

Old

02-19-2007, 01:09 PM

Default

That’s only an empty placeholder gif. Most likely the css link is wrong (yui-ext.css instead of ext-all.css).

Reply With Quote

 
#5  

Old

02-19-2007, 01:14 PM

Default

Take a look at the docs under Ext.BLANK_IMAGE_URL. It the url of a blank image file Ext can use to create inline image with css background images.

Reply With Quote

 
#6  

Old

02-19-2007, 01:21 PM

Default

i think it have something to do with core/ext.js BLANK_IMAGE_URL: “http://www.yui-ext.com/s.gif”.
the css urls (../images/default/s.gif) are all ok.

ah, got it : http://www.yui-ext.com/forum/viewtopic.php t=2829

Reply With Quote

 
#7  

Old

02-19-2007, 01:27 PM

Default

The reason it isn’t specified as a standard css path is because the correct path depends on what page it is running in. Ideally, it should be set to an absolute path.

Reply With Quote

 
#8  

Old

02-19-2007, 01:54 PM

Default

Quote:
Originally Posted by jacksloc

The reason it isn’t specified as a standard css path is because the correct path depends on what page it is running in. Ideally, it should be set to an absolute path.

By “absolute” you mean root relative, right 

Root relative:

/images/s.gif

instead of absolute:

http://mydomain.com/images/s.gif

Reply With Quote

 
#9  

Old

02-19-2007, 01:59 PM

Default

Yes, that would work too.

Reply With Quote

 
#10  

Old

02-19-2007, 02:06 PM

Default

The only reason I mention is that the absolute path will cause issues for users who have apps that switch in and out of SSL mode.

Reply With Quote