在 IE11(非 Edge 模式)中呈现 Windows 10 时,ExtJS 6 数据视图中出现问题
Issue in ExtJS 6 dataview while rendering on Windows 10 in IE11 (non Edge mode)
背景:
我们已经使用 ExtJS 6 来开发我们的应用程序。在其中一个视图中,我们在选项卡面板中使用了数据视图。为此数据视图启用了可滚动。我们已经为 Edge 指定了 X-UA-Compatible 模式。
工作状态:Windows7 + IE11 (Edge mode) + Smart Card authentication
不工作条件:Windows10、IE11(非Edge模式)+虚拟智能卡认证(虽然这个条件不确定)
问题:
此视图在 Chrome 上的 Windows 7 平台以及 IE11(默认为边缘模式)上呈现完美。它在 IE 11 的 Windows 10 平台上渲染时会发出问题。在此平台上,IE11 在 IE11 浏览器中没有 Edge 模式(单独的 Edge 浏览器可用),因此应用程序本身默认在 IE11 模式下运行。在加载数据之前呈现此视图时,它会抛出错误 "can not access n.dom from null or undefined"(我可能没有写出准确的错误描述)。
分析:
分析发现,dataview的refresh方法不知何故被调用,并没有找到它的目标元素。错误的确切位置在 me.getTargetEl() 处数据视图的刷新方法中。在进行故障排除时,发现滚动功能(由 scrollable:true 启用)甚至在渲染之前就试图刷新视图,因此它找不到目标 DOM 元素。
决议:
虽然,我们没有在 ExtJS 中找到解决方案,但我们禁用了数据视图的可滚动并使用溢出 属性 按样式呈现滚动。
例如风格:{溢出:'auto'}
这解决了问题,因为在没有启用可滚动的情况下添加了滚动。
发布解决方案作为答案。
分析:分析发现,dataview的refresh方法不知何故被调用,没有找到目标元素。错误的确切位置在 me.getTargetEl() 处数据视图的刷新方法中。在进行故障排除时,发现滚动功能(由 scrollable:true 启用)甚至在渲染之前就试图刷新视图,因此它找不到目标 DOM 元素。
解决方案:虽然我们没有在 ExtJS 中找到解决方案,但我们禁用了数据视图的可滚动并使用溢出 属性 按样式呈现滚动。例如style: { overflow: 'auto'} 这解决了问题,因为在没有启用可滚动的情况下添加了滚动。
使用这个
scrollable: {
y: 'scroll'
}
背景: 我们已经使用 ExtJS 6 来开发我们的应用程序。在其中一个视图中,我们在选项卡面板中使用了数据视图。为此数据视图启用了可滚动。我们已经为 Edge 指定了 X-UA-Compatible 模式。 工作状态:Windows7 + IE11 (Edge mode) + Smart Card authentication 不工作条件:Windows10、IE11(非Edge模式)+虚拟智能卡认证(虽然这个条件不确定)
问题: 此视图在 Chrome 上的 Windows 7 平台以及 IE11(默认为边缘模式)上呈现完美。它在 IE 11 的 Windows 10 平台上渲染时会发出问题。在此平台上,IE11 在 IE11 浏览器中没有 Edge 模式(单独的 Edge 浏览器可用),因此应用程序本身默认在 IE11 模式下运行。在加载数据之前呈现此视图时,它会抛出错误 "can not access n.dom from null or undefined"(我可能没有写出准确的错误描述)。
分析: 分析发现,dataview的refresh方法不知何故被调用,并没有找到它的目标元素。错误的确切位置在 me.getTargetEl() 处数据视图的刷新方法中。在进行故障排除时,发现滚动功能(由 scrollable:true 启用)甚至在渲染之前就试图刷新视图,因此它找不到目标 DOM 元素。
决议: 虽然,我们没有在 ExtJS 中找到解决方案,但我们禁用了数据视图的可滚动并使用溢出 属性 按样式呈现滚动。 例如风格:{溢出:'auto'} 这解决了问题,因为在没有启用可滚动的情况下添加了滚动。
发布解决方案作为答案。
分析:分析发现,dataview的refresh方法不知何故被调用,没有找到目标元素。错误的确切位置在 me.getTargetEl() 处数据视图的刷新方法中。在进行故障排除时,发现滚动功能(由 scrollable:true 启用)甚至在渲染之前就试图刷新视图,因此它找不到目标 DOM 元素。
解决方案:虽然我们没有在 ExtJS 中找到解决方案,但我们禁用了数据视图的可滚动并使用溢出 属性 按样式呈现滚动。例如style: { overflow: 'auto'} 这解决了问题,因为在没有启用可滚动的情况下添加了滚动。
使用这个
scrollable: {
y: 'scroll'
}