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

来源：互联网发布：禁止ip访问http linux 编辑：程序博客网时间：2024/05/16 08:41

在一个告警项目中做一个新需求时，前台采用了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问题是十分重要的

0 0