Ext的Element的createChild方法在IE和FF的显示问题

为什么总是这样呢。。在ff能按预期正常显示的东西ie总是不出效果。
这个是测试页面：<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-3.0.0/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="sample/api-min.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL='ext-3.0.0/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Ext.fly('selects').on('click',function(e,t){
OrderTest.getSub(t.id,function(list){
if(list=='-1')return;
var opt = list.split(',');
for(var i=0,len=opt.length; i<len; ++i){
if(Ext.fly('param'+opt[i]))Ext.fly('param'+opt[i]).remove();
Ext.fly(t.id).createChild({
tag: 'option',
id: 'param'+opt[i],
value: opt[i],
html: opt[i]
});
}
});
});
});
</script>
  </head>
  
  <body>
    
    <div id="selects">
    <select id="prop1"><option value="-1">All</option></select>
    <select id="prop2"><option value="-1">All</option></select>
    <select id="prop3"><option value="-1">All</option></select>
    <select id="prop4"><option value="-1">All</option></select>
    </div>
    
  </body>
</html>
这个是远程方法，其实没什么关系。关键是上面那个Ext.fly(t.id).createChild（）IE就是没有下拉菜单
package ext.direct;import com.softwarementors.extjs.djn.config.annotations.DirectMethod;public class OrderTest {

@DirectMethod
public String getSub(String id){
System.out.println(id);
String ret = null;
if("prop1".equals(id)){
ret = "1112,1113,1114";
}else if("prop2".equals(id)){
ret = "2221,2222,2223";
}else if("prop3".equals(id)){
ret = "3331,3332,3333";
}else if("prop4".equals(id)){
ret = "4441,4442,4443,4444";
}else{
ret = "-1";
}
return ret;
}

}

解决方案 »

  1.   


    Ext.fly(t.id).createChild({
                                tag: 'option',
                                id: 'param'+opt[i],
                                value: opt[i],
                                html: opt[i]
                            });
    你先不要创建option创建其他的标签看看，如div、input、a标签这些
    如果这些可以创建就不是方法的使用问题
    一个是地址的createChild用了innerHTML
    下来菜单的option用innerHTML会出现错误，你可以试试看
    select.innerHTML = "<option value='1'>man</option>";
    最后看到的不是"<option value='1'>man</option>";而是man</option>这样的
    如果真是那样你就需要用createElement("option")
    然后用Ext.fly().appendChild(createElement("option"));这种方式
      

  2.   

    谢谢。可是为什么现在的写法点一次时没反应，好像是先加载了数据生成下拉菜单，点第二次才展开菜单。。
    for(var i=0,len=opt.length; i<len; ++i){
    if(Ext.fly('param'+opt[i]))Ext.fly('param'+opt[i]).remove();
    var a = document.createElement("option");
    a.setAttribute('id','param'+opt[i]);
    a.setAttribute('value',opt[i]);
    a.innerHTML=opt[i];
    Ext.fly(t.id).appendChild(a);
    }
      

  3.   

    在firebug中看看第一次会做什么操作，看看代码会创建哪些东东