解决Ext在ie9报错:不支持extjs对象的“createContextualFragment属性或方法

本文介绍了一段JavaScript代码,该代码用于为浏览器的 Range 对象补全 createContextualFragment 方法。此方法允许用户通过 Range 对象直接创建文档片段,提高了DOM操作的灵活性。

把下面的代码放入js文件的头部

<script type="text/javascript" language="javascript">
        if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {
            Range.prototype.createContextualFragment = function(html) {
                var frag = document.createDocumentFragment(),div = document.createElement("div");
                frag.appendChild(div);
                div.outerHTML = html;
                return frag;
            };
        }
</script>

<think> 我们正在处理一个关于浏览器兼容性的问题,具体错误是:对象不支持“getSubmitData”属性方法。根据引用[1]的内容,它提到了一些调试方法,但并没有直接解决我们的问题。因此,我们需要从其他角度来考虑。 这个错误通常发生在调用一个对象上不存在的方法时。在Ext JS中,`getSubmitData`是Ext.form.Basic的一个方法,用于获取表单中要提交的数据。出现这个错误可能有几个原因: 1. 你调用的对象不是一个表单(即不是Ext.form.PanelExt.form.FormPanel的实例)。 2. 你正在使用的Ext JS版本不支持`getSubmitData`方法(注意:该方法Ext JS 4中引入,但在某些版本中可能有变动)。 3. 浏览器兼容模式(如IE的兼容模式)可能会导致一些方法不可用,因为模拟旧版浏览器时可能缺失某些新特性。 根据用户的问题,特别提到“浏览器兼容模式”,因此我们重点考虑第3点,但也不能排除其他原因。 解决方案: 第一步:确保你调用的对象是表单(FormPanelBasicForm)。例如,如果你这样调用: form.getForm().getSubmitData() 那么请确认`form`是一个FormPanel,并且`getForm()`返回的是Ext.form.Basic实例。 第二步:确认Ext JS版本。在兼容模式下,如果浏览器模拟的是旧版IE(如IE7),那么可能不支持某些JavaScript特性,而Ext JS 4.x对IE7是支持的,但需要确保使用正确的文档模式。可以通过在页面头部添加以下meta标签强制使用最新渲染模式: <meta http-equiv="X-UA-Compatible" content="IE=edge"> 第三步:如果问题仍然存在,尝试使用其他方法获取表单数据。例如,你可以使用`getValues()`方法(返回表单字段名值对的对象)代替`getSubmitData()`。注意:`getValues()`返回的是所有字段的值,而`getSubmitData()`返回的是要提交的数据(可能仅包含修改过的字段,取决于配置)。 第四步:检查是否在兼容模式下有已知的Ext JS bug。可以尝试在Ext JS官方论坛社区搜索类似问题。 第五步:如果确定是兼容模式的问题,而且必须使用兼容模式,那么尝试在Ext JS加载后执行以下代码(仅用于调试)来检查Ext.form.Basic是否确实有`getSubmitData`方法: console.log(Ext.form.Basic.prototype.getSubmitData); 在IE的兼容模式下,可以通过引用[1]中提到的方法查看日志:在地址栏输入`javascript:void(Ext.log.show())`(注意:这个命令在IE中可能无效,因为Ext.log.show()在IE中不一定在控制台显示,可能需要使用其他调试工具)。 第六步:如果发现该方法确实不存在(可能是Ext JS版本问题),则需要考虑升级Ext JS版本使用备用方案。 第七步:如果以上步骤都无法解决,可以尝试使用Ext JS的替代方法,例如使用`getForm().getValues()`来获取所有值,然后自己构建提交数据。 示例代码: 假设你原本这样调用: var submitData = form.getForm().getSubmitData(); 可以尝试替换为: var values = form.getForm().getValues(); // 然后根据需求处理values,如果需要的是原始数据(包括未修改的字段),那么直接用values;如果只需要修改的字段,那么可能需要结合getFieldValues方法(但注意getFieldValues可能也不存在于所有版本)者记录修改状态。 注意:`getSubmitData`方法返回的数据格式与`getValues`不同。`getSubmitData`返回的是适合提交的原始数据(通常用于Ajax提交),它可能包含一些额外信息(比如多选框未被选中时为未定义),而`getValues`返回的是所有字段当前值的对象。 因此,替代方案可能需要根据你的提交逻辑进行调整。 另外,还可以考虑使用表单的`submit`方法直接提交,而不用手动获取数据。 总结:首先检查对象是否是表单,然后检查Ext JS版本和浏览器模式,尝试替换方法,最后考虑使用其他方式获取数据。 如果上述方法都不能解决问题,请提供更多的上下文信息,例如使用的Ext JS版本,出现问题的浏览器和版本,以及相关的代码片段。 相关的问题: 1. 如何在Ext JS中获取表单数据? 2. Ext JS不同版本中表单提交的方法有哪些差异? 3. 如何强制浏览器使用最新渲染模式? 4. 如何在IE兼容模式下调试Ext JS应用程序? </think> ### 浏览器兼容模式下对象不支持“getSubmitData”方法解决方案 该错误通常发生在 **IE兼容模式** **低版本浏览器** 中,原因是 Ext JS 的 `getSubmitData()` 方法未被正确识别。以下是系统性的解决方案: #### 1. **强制使用标准渲染模式(推荐)** 在 HTML `<head>` 中添加以下代码,强制浏览器使用最新渲染引擎: ```html <meta http-equiv="X-UA-Compatible" content="IE=edge"> ``` - 作用:避免浏览器回退到旧版兼容模式[[^1]](#ref1) #### 2. **升级 Ext JS 版本** `getSubmitData` 在 Ext JS 4.x+ 中完整支持: ```javascript // 检查当前版本 console.log("Ext JS Version:", Ext.versions.extjs.version); // 4.1以下需升级 ``` - 升级到 4.2+ 可解决大部分兼容性问题 #### 3. **兼容性替代方案** ```javascript // 替代 getSubmitData 的兼容写法 const form = Ext.getCmp(&#39;yourFormId&#39;).getForm(); // 方案1: 使用 getValues() const submitData = form.getValues(); // 方案2: 手动构建数据 (兼容旧版IE) const data = {}; form.getFields().each(field => { data[field.getName()] = field.getValue(); }); ``` #### 4. **浏览器白名单设置** 在 IE/Edge 中: 1. 按 <kbd>F12</kbd> 打开开发者工具 2. 在 **仿真** 标签页: - 文档模式 → 选择 “Edge (最新)” - 用户代理字符串 → 取消勾选 “自动选择” #### 5. **框架补丁(Ext JS 4.1 专用)** 在应用初始化代码中加入: ```javascript if (Ext.isIE) { Ext.form.Basic.override({ getSubmitData: function() { return this.getValues(); // 降级兼容实现 } }); } ``` > **关键排查点**: > 1. 确认浏览器控制台是否报错 `Object doesn&#39;t support property or method &#39;getSubmitData&#39;` > 2. 检查网络面板是否有 Ext JS 库加载失败 > 3. 使用 `Ext.supports` 检测浏览器功能: > ```javascript > console.log("FormData Support:", Ext.supports.FormData); // IE9=false > ``` --- ### 相关问题 1. 如何检测用户当前浏览器的兼容模式? 2. Ext JS 中有哪些替代 `getSubmitData()` 的数据获取方法? 3. 针对 IE 浏览器,Ext JS 开发需要特别注意哪些 API 限制? 4. 如何为 Ext JS 4.x 编写跨浏览器的兼容性补丁? [^1]: 此方案通过强制浏览器使用最新渲染引擎规避兼容性问题,适用于 IE8+ 所有版本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值