ExtJs4.x动态添加组件无法正常显示问题

最新推荐文章于 2022-01-05 09:10:05 发布

IMK7

最新推荐文章于 2022-01-05 09:10:05 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端技术文章标签： extjs

本文链接：https://blog.youkuaiyun.com/yidragon88xx/article/details/38755251

Web前端技术专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了在使用ExtJS4.1框架时，如何正确地在容器Panel中动态添加子组件，并解决不同浏览器版本间的兼容性问题，特别关注了IE与IE9+版本之间的JS属性差异导致的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个告警项目中做一个新需求时，前台采用了ExtJs4.1框架在使用过程中需要动态添加一个Ext组件容器(Panel)，遇到了一些问题如下：

1. ExtJs中容器Panel或Container添加一个子组件的方法是在定义的时候采用items或者是采用该组件的add函数来添加，如下代码段：

tb = new Ext.toolbar.Toolbar({
    renderTo: document.body
});  // toolbar is rendered
// add multiple items.
// (defaultType for Toolbar is 'button')
tb.add([{text:'Button 1'}, {text:'Button 2'}]);

2. 按照API中的介绍在项目中添加了一个Grid组件的封装并调试发现不能正常显示到页面中

...var userListPanel = Ext.create('Ext.panel.Panel', {
	items : [searchPanel]
});

var mainPanel = Ext.getCmp('mainTabPanel');
mainPanel.add(userListPanel);
mainPanel.doLayout();...

3. IE浏览器版本配置，在Java应用中可以指定IE浏览器版本，这也使因为IE版本之间的Javascript的兼容性问题，设置方式如下：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> //指定设置的页面以文档模式为IE8的方式浏览内容

4. 调试JS发现在IE模式下获得到ExtJs的TreePanel组件中的节点属性为item.innerText，而在Ie9+中的版本中则为item.textContent，所以未正常添加是因为属性值没有获得到导致2步骤中的代码没有正常执行，所以确定浏览器版本之间的差异解决JS问题是十分重要的