`

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

    博客分类:
  • Ext
阅读更多

同事写了一个最基本的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做的真的很不错。

分享到:
评论
7 楼 WangSongYuan 2015-02-05  
我也遇到楼主一样的问题
果然在<body>后面填一个<span/>之类的就可以了
6 楼 meteorzc 2010-08-17  
呵呵,有意思!
5 楼 jianpc 2010-08-17  
不好意思啊,第一次用javaeye。。。还以为不能发帖子就啥都干不了了。灰常感谢
4 楼 clue 2010-08-17  
<div class="quote_title">nneverwei 写道</div>
<div class="quote_div">
<p>同事写了一个最基本的EXT3.2的例子,就一个基本JSP页面,弹出一个EXT的对话框。</p>
<p> </p>
<p>结果在IE8上报错<span style="color: #ff0000;">对象不支持此属性或方法</span>(ext-all.js文件中),让我帮忙调试。觉得简简单单几行代码,怎么会出现这种错误?我先用我自己的IE登录他的页面,一样的错误。但当我想用火狐进一步跟踪的时候,居然发现火狐上面没有异常,换Chrome,也没有错误。看来错误只出现在IE上。</p>
<p> </p>
<p>可是短短几行代码,翻来覆去,也瞧不出有任何错误。代码如下:</p>
<p> </p>
<p> </p>
<pre name="code" class="html">&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8" %&gt;
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;你好&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="styles/ext-all.css" /&gt;
&lt;script type="text/javascript" src="scripts/ext-base.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/ext-all.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
           
            Ext.onReady(function(){
                // Ext.QuickTips.init();
                Ext.MessageBox.alert("fff", "fffffff");
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    hello World
    &lt;/body&gt;
&lt;/html&gt;</pre>
<p> </p>
<p>(上述代码中的路径都没有错误)。</p>
<p> </p>
<p>最后才发现,原来是"hello Wolrd"这几个字造成的。确切的解释是,<span style="color: #3366ff;">当使用EXT时,&lt;body&gt;&lt;/body&gt;中的第一个元素不能是纯文本,否则在IE上会报错误</span>。</p>
<p> </p>
<p>上官网想进一步了解原因,未果。同时了解到这个BUG在EXT2.X开始就存在了,居然一直没有解决,汗……</p>
<p> </p>
<p>比较蹩脚的解决方式也很直接,在&lt;body&gt;后面填一个&lt;span/&gt;之类的就可以了,如下:</p>
<p> </p>
<p> </p>
<pre name="code" class="html">&lt;body&gt;
   &lt;span/&gt;
    hello World
&lt;/body&gt;</pre>
 
<p>唉,其实EXT做的真的很不错。</p>
</div>
<p> </p>
<p>这个问题还蛮有意思。。。刚才试了下,IE6同样也有这个问题。</p>
<p>查看调用堆栈,发现是这里出了问题:</p>
<pre name="code" class="js">Ext.Shadow.Pool = function(){
    var p = [];
    var markup = Ext.isIE ?
                 '&lt;div class="x-ie-shadow"&gt;&lt;/div&gt;' :
                 '&lt;div class="x-shadow"&gt;&lt;div class="xst"&gt;&lt;div class="xstl"&gt;&lt;/div&gt;&lt;div class="xstc"&gt;&lt;/div&gt;&lt;div class="xstr"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="xsc"&gt;&lt;div class="xsml"&gt;&lt;/div&gt;&lt;div class="xsmc"&gt;&lt;/div&gt;&lt;div class="xsmr"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="xsb"&gt;&lt;div class="xsbl"&gt;&lt;/div&gt;&lt;div class="xsbc"&gt;&lt;/div&gt;&lt;div class="xsbr"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
    return {
        pull : function(){
            var sh = p.shift();
            if(!sh){
                sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup)); // &lt;--- 这一行,firstChild为文本节点
                sh.autoBoxAdjust = false;
            }
            return sh;
        },

        push : function(sh){
            p.push(sh);
        }
    };
}();</pre>
<p> </p>
<p>在insertHtml中,IE使用insertAdjacentHTML,FF使用createRange  + insertBefore / appendChild</p>
<p>beforeBegin代表插入到指定dom同级前面,文本节点无insertAdjacentHTML,跑到FF那块逻辑,从而导致createRange出错。</p>
<p> </p>
<p>可以这样临时修改(覆盖Ext.Shadow.Pool):</p>
<pre name="code" class="js">...
sh = Ext.get(Ext.DomHelper.insertHtml("afterBegin", document.body, markup));
...</pre>
<p> </p>
<p>也可以改进insertHtml,这个就要靠Extjs dev干了……</p>
<p> </p>
<p>PS: 题外话,LS的应该去问答频道发,现在在搞活动,愿意回答的人很多……</p>
3 楼 jianpc 2010-08-17  
如果 visits的值都小于 0.5 就没有办法显示了
2 楼 jianpc 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                  
				}              
			}]                }    });});
1 楼 jianpc 2010-08-17  
借楼主的帖子,发个问题,希望有高手能够看见。
extjs 3.0 linechart 的一个奇怪的问题。
我按照网上的例子,搞定了折线图的显示,
但是当所有数值都小于0.5的时候,不显示了。
有没有高手知道这是怎么回事??

相关推荐

    extjs属性方法大全

    ### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类,主要包括提交和加载数据的功能。 - **属性:** - `success`: 表示操作成功时的回调函数。 - `failure`: ...

    Exjts2.2.1中datefield控件在IE8下显示不全BUG

    ### Exjts2.2.1中datefield控件在IE8下显示不全BUG #### 背景介绍 在使用Extjs2.2.1版本开发Web应用时,可能会遇到一个特定的问题:`datefield`控件在Internet Explorer 8(简称IE8)浏览器中的显示存在问题,具体...

    解决Extjs3.0不兼容IE9

    项目中遇到Extjs3.0在IE9中不兼容,现有两种解决方法

    Extjs & Ext.net中的一些属性

    在深入探讨Extjs与Ext.net中的属性之前,我们先简要了解一下这两个框架。Extjs是一个用JavaScript编写的开源前端框架,用于构建复杂的企业级Web应用,而Ext.net则是Extjs的.NET版本,它为.NET开发者提供了与Extjs...

    extjs bug 图标大全

    "extjs bug 图标大全" 指的是在ExtJS框架中与错误或问题相关的图标集合。这些图标通常用于表示程序中的错误状态、警告信息或者调试标志,帮助开发者和用户更好地理解应用的状态。 在ExtJS中,图标通常通过CSS类来...

    ExtJS对几种面向对象体现.txt

    根据提供的文件信息,可以看出主题是关于ExtJS框架与面向对象编程的实现方式。然而,由于提供的部分内容似乎并不完整且存在一些非标准字符,这给直接提取有用信息带来了困难。因此,我们将基于标题、描述和标签中的...

    ExtJs实例详解(个组件的属性方法例子应有尽有)

    ExtJs的各种组件面板等的实例代码详解 以及实例的效果图显示

    ExtJS资料笔记(extjs各个属性的详解)

    ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)

    ExtJS3.3版本的BUG

    根据提供的信息,我们可以总结出以下知识点: ...综上所述,对于ExtJS 3.3版本中`Window`组件出现的问题,我们可以通过调整代码逻辑、升级框架版本或寻求社区支持等多种方式来解决问题。希望这些信息对你有所帮助!

    EXTJS属性文档

    EXTJS这些控件的属性和方法丰富多样,极大地增强了表单组件的功能性和灵活性。学习和理解这些属性对于EXTJS开发者来说至关重要,能够帮助他们创建符合业务需求且用户体验良好的Web应用。通过熟练掌握EXTJS的各种属性...

    Extjs 常用属性

    `layout`属性用于定义容器的布局方式,Extjs支持多种布局方式,如`'fit'`(填充布局)、`'border'`(边界布局)、`'table'`(表格布局)、`'column'`(列布局)和`'card'`(卡片布局)。选择不同的布局方式,可以...

    EXTjs4.0学习文档

    但由于 JavaScript 从原理上根本不支持这种结构,因此在 EXTJS 中,私有与公有方法完全凭靠着用户自觉,没有像 JAVA 那样的强制性。 事件是由类定义的,并且可以在类对象自身状态发生改变的触发。只有被定阅的事件...

    ExtJS对原有JavaScript对象的扩展

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

    轻松搞定Extjs 带目录

    Extjs支持面向对象编程,其对象模型包括: - 类的定义(Ext.extend) - 对象实例化(通过new关键字) - 原型链继承(JavaScript的继承机制) - 类的配置选项和方法(config选项) #### 4. 消息框的使用 Extjs提供...

    解决datefield组件 日期选择框在IE8下显示不完整的问题

    extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...

    Extjs4.2前台导出Excel(多次导出失败bug已修改)

    在Extjs4.2中导出Excel,主要是通过创建一个HTML表格,然后利用浏览器的`window.navigator.msSaveBlob`方法(适用于IE及Edge)或`a`标签的`download`属性(适用于其他现代浏览器)来实现。这种方法无需后端服务器...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    8. **验证**:设计的流程图可能需要遵循特定的规则,如不能形成循环。ExtJS的事件和数据验证机制可以用于实现这些逻辑。 9. **集成与部署**:设计完成后,工作流需要与后端系统集成,执行实际的业务逻辑。这通常...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid ...

Global site tag (gtag.js) - Google Analytics