论坛首页 Web前端技术论坛

Extjs IE8 对象不支持此属性或方法的bug

浏览 9405 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-08-10  

同事写了一个最基本的EXT3.2的例子,就一个基本JSP页面,弹出一个EXT的对话框。

 

结果在IE8上报错对象不支持此属性或方法(ext-all.js文件中),让我帮忙调试。觉得简简单单几行代码,怎么会出现这种错误?我先用我自己的IE登录他的页面,一样的错误。但当我想用火狐进一步跟踪的时候,居然发现火狐上面没有异常,换Chrome,也没有错误。看来错误只出现在IE上。

 

可是短短几行代码,翻来覆去,也瞧不出有任何错误。代码如下:

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>你好</title>
		<link rel="stylesheet" type="text/css" href="styles/ext-all.css" />
		<script type="text/javascript" src="scripts/ext-base.js"></script>
		<script type="text/javascript" src="scripts/ext-all.js"></script>
        <script type="text/javascript">
            
            Ext.onReady(function(){
                //	Ext.QuickTips.init();
                Ext.MessageBox.alert("fff", "fffffff");
            });
        </script>
    </head>
    <body>
    	hello World
    </body>
</html>

 

(上述代码中的路径都没有错误)。

 

最后才发现,原来是"hello Wolrd"这几个字造成的。确切的解释是,当使用EXT时,<body></body>中的第一个元素不能是纯文本,否则在IE上会报错误

 

上官网想进一步了解原因,未果。同时了解到这个BUG在EXT2.X开始就存在了,居然一直没有解决,汗……

 

比较蹩脚的解决方式也很直接,在<body>后面填一个<span/>之类的就可以了,如下:

 

<body>
   <span/>
    hello World
</body>
 

唉,其实EXT做的真的很不错。

   发表时间:2010-08-17  
借楼主的帖子,发个问题,希望有高手能够看见。
extjs 3.0 linechart 的一个奇怪的问题。
我按照网上的例子,搞定了折线图的显示,
但是当所有数值都小于0.5的时候,不显示了。
有没有高手知道这是怎么回事??
0 请登录后投票
   发表时间:2010-08-17  
具体JS代码如下
Ext.onReady(function(){    
	var data= [            
		{name:'Jul 07', visits: 0.001, views: 0.002},            
		{name:'Aug 07', visits: 0.002, views: 0.002},            
		{name:'Sep 07', visits: 0.003, views: 0.003},            
		{name:'Oct 07', visits: 0.004, views: 0.004},            
		{name:'Nov 07', visits: 0.005, views: 0.001},            
		{name:'Dec 07', visits: 0.006, views: 0.002},            
		{name:'Jan 08', visits: 0.007, views: 0.003},            
		{name:'Feb 08', visits: 0.508, views: 0.001}        ]
	var store = new Ext.data.Store({    
		proxy: new Ext.data.MemoryProxy(data),    
		reader: new Ext.data.JsonReader({}, 
		[{name: 'name'},        
			{name: 'visits',type:'float'},        
			{name: 'views',type:'float'}    ])});
		store.load();    
	// extra extra simple    
	new Ext.Panel({        
		title: 'ExtJS.com Visits Trend',       
		applyTo: 'container',        
		width:500,        
		height:300,        
		layout:'fit',        
		items:{            
			xtype: 'linechart',            
			store: store,            
			xField: 'name',           
			listeners: {                
				itemclick: function(o){                    
					var rec = store.getAt(o.index);                    
					Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));                }            },            
			series: [{//列                  
				type: 'line', //类型可以改变(线)                  
				displayName: 'Visits',                  
				yField: 'visits',                  
				style: {                      
					color:0xE1E100                  
				}              
			}]                }    });});
0 请登录后投票
   发表时间:2010-08-17  
如果 visits的值都小于 0.5 就没有办法显示了
0 请登录后投票
   发表时间:2010-08-17  
nneverwei 写道

同事写了一个最基本的EXT3.2的例子,就一个基本JSP页面,弹出一个EXT的对话框。

 

结果在IE8上报错对象不支持此属性或方法(ext-all.js文件中),让我帮忙调试。觉得简简单单几行代码,怎么会出现这种错误?我先用我自己的IE登录他的页面,一样的错误。但当我想用火狐进一步跟踪的时候,居然发现火狐上面没有异常,换Chrome,也没有错误。看来错误只出现在IE上。

 

可是短短几行代码,翻来覆去,也瞧不出有任何错误。代码如下:

 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>你好</title>
		<link rel="stylesheet" type="text/css" href="styles/ext-all.css" />
		<script type="text/javascript" src="scripts/ext-base.js"></script>
		<script type="text/javascript" src="scripts/ext-all.js"></script>
        <script type="text/javascript">
            
            Ext.onReady(function(){
                //	Ext.QuickTips.init();
                Ext.MessageBox.alert("fff", "fffffff");
            });
        </script>
    </head>
    <body>
    	hello World
    </body>
</html>

 

(上述代码中的路径都没有错误)。

 

最后才发现,原来是"hello Wolrd"这几个字造成的。确切的解释是,当使用EXT时,<body></body>中的第一个元素不能是纯文本,否则在IE上会报错误

 

上官网想进一步了解原因,未果。同时了解到这个BUG在EXT2.X开始就存在了,居然一直没有解决,汗……

 

比较蹩脚的解决方式也很直接,在<body>后面填一个<span/>之类的就可以了,如下:

 

 

<body>
   <span/>
    hello World
</body>
 

唉,其实EXT做的真的很不错。

 

这个问题还蛮有意思。。。刚才试了下,IE6同样也有这个问题。

查看调用堆栈,发现是这里出了问题:

Ext.Shadow.Pool = function(){
    var p = [];
    var markup = Ext.isIE ?
                 '<div class="x-ie-shadow"></div>' :
                 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
    return {
        pull : function(){
            var sh = p.shift();
            if(!sh){
                sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup)); // <--- 这一行,firstChild为文本节点
                sh.autoBoxAdjust = false;
            }
            return sh;
        },

        push : function(sh){
            p.push(sh);
        }
    };
}();

 

在insertHtml中,IE使用insertAdjacentHTML,FF使用createRange  + insertBefore / appendChild

beforeBegin代表插入到指定dom同级前面,文本节点无insertAdjacentHTML,跑到FF那块逻辑,从而导致createRange出错。

 

可以这样临时修改(覆盖Ext.Shadow.Pool):

...
sh = Ext.get(Ext.DomHelper.insertHtml("afterBegin", document.body, markup));
...

 

也可以改进insertHtml,这个就要靠Extjs dev干了……

 

PS: 题外话,LS的应该去问答频道发,现在在搞活动,愿意回答的人很多……

1 请登录后投票
   发表时间:2010-08-17  
不好意思啊,第一次用javaeye。。。还以为不能发帖子就啥都干不了了。灰常感谢
0 请登录后投票
   发表时间:2011-07-20  
jianpc 写道
如果 visits的值都小于 0.5 就没有办法显示了

 

原因是数据相差太大,你把数据各放大一千倍后比较发现相差特别大,所以在图中数据小的根本显示不了!

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics