ExtJS的问题：ext 元素怎么将自身的生成的dom 元素render到一个创建的尚未附加到页面dom树上的dom节点上

如题疑问，下面贴代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>RaidoGroup/CheckBoxGroup/ComboBox</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/bootstrap.js">
</script>
<script type="text/javascript" src="extjs/ext-all.js">
</script>

</head>
<body>
<div id='checkBoxDiv'></div>
<div id='radioDiv'></div>
<div id='comboBoxDiv'></div>
<script type="text/javascript">
Ext.onReady(function() {
var checkBoxGroup = Ext.create('Ext.form.CheckboxGroup', {
width : 300,
name:'rb',
items : [ {
boxLabel : 'Item 1',
inputValue : '1'
}, {
boxLabel : 'Item 2',
inputValue : '2',
checked : true
}]
});var radioGroup = Ext.create('Ext.form.RadioGroup',{
width:300,
items: [
            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true}
        ]
});var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"}
    ]
});var comboBox = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr'
});/**
 * checkBoxGroup 行2放置行3下方即报错：Uncaught TypeError: Cannot read property 'dom' of null 
 */
var checkBoxGroupDiv = document.createElement('DIV');//行1
document.getElementById('checkBoxDiv').appendChild(checkBoxGroupDiv);//行2
checkBoxGroup.render(checkBoxGroupDiv);//行3
//----------------------------raidoGroup
var radioGroupDiv = document.createElement('DIV');
document.getElementById('radioDiv').appendChild(radioGroupDiv);
radioGroup.render(radioGroupDiv);//----------------------------comboBox
/***
 * 我的疑问：行2 和行3(可以换行也就是所我将两行调换依旧不像上面俩组件一样报那样的错)  但是checkboxGroup以及  raidoGroup为何会报错？
 * 复选、单选组以及下拉的渲染有什么不同么？
 */
var comboBoxDiv = document.createElement('DIV');
document.getElementById('comboBoxDiv').appendChild(comboBoxDiv);//行2
comboBox.render(comboBoxDiv);//行3});
</script>
</body>
</html>
//------------------------------------------------------------------------问题在注释内有解释。另外我怀疑是不是extjs的bug.......这里先感谢“黄灯桥”老师今晚帮助。具体解释为什么希望有人帮忙解释下！（就200分，希望尽快结贴）

解决方案 »

  1.   

    代码帮调整一下，好看点：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    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>RaidoGroup/CheckBoxGroup/ComboBox</title><meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" type="text/css"
    href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/bootstrap.js">
    </script>
    <script type="text/javascript" src="extjs/ext-all.js">
    </script></head>
    <body>
    <div id='checkBoxDiv'></div>
    <div id='radioDiv'></div>
    <div id='comboBoxDiv'></div>
    <script type="text/javascript">
    Ext.onReady(function() {
    var checkBoxGroup = Ext.create('Ext.form.CheckboxGroup', {
    width : 300,
    name:'rb',
    items : [ {
    boxLabel : 'Item 1',
    inputValue : '1'
    }, {
    boxLabel : 'Item 2',
    inputValue : '2',
    checked : true
    }]
    });var radioGroup = Ext.create('Ext.form.RadioGroup',{
    width:300,
    items: [
      { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
      { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true}
      ]
    });var states = Ext.create('Ext.data.Store', {
      fields: ['abbr', 'name'],
      data : [
      {"abbr":"AL", "name":"Alabama"},
      {"abbr":"AK", "name":"Alaska"}
      ]
    });var comboBox = Ext.create('Ext.form.ComboBox', {
      fieldLabel: 'Choose State',
      store: states,
      queryMode: 'local',
      displayField: 'name',
      valueField: 'abbr'
    });/**
     * checkBoxGroup 行2放置行3下方即报错：Uncaught TypeError: Cannot read property 'dom' of null  
     */
    var checkBoxGroupDiv = document.createElement('DIV');//行1
    document.getElementById('checkBoxDiv').appendChild(checkBoxGroupDiv);//行2
    checkBoxGroup.render(checkBoxGroupDiv);//行3
    //----------------------------raidoGroup
    var radioGroupDiv = document.createElement('DIV');
    document.getElementById('radioDiv').appendChild(radioGroupDiv);
    radioGroup.render(radioGroupDiv);//----------------------------comboBox
    /***
     * 我的疑问：行2 和行3(可以换行也就是所我将两行调换依旧不像上面俩组件一样报那样的错) 但是checkboxGroup以及 raidoGroup为何会报错？
     * 复选、单选组以及下拉的渲染有什么不同么？
     */
    var comboBoxDiv = document.createElement('DIV');
    document.getElementById('comboBoxDiv').appendChild(comboBoxDiv);//行2
    comboBox.render(comboBoxDiv);//行3});
    </script>
    </body>
    </html>ext4的bug确实不少，我之前也问了不少问题，很多都是bug造成的无解，后面版本升级后就解决了。
    也可以调试一下，看下源码，本人水平有限，看源码能力差点，大虾可以试下
      

  2.   

    貌似没解决这bug呢 ext必须先创建这个dom节点  才能将ext组件render上去，先后顺序不能颠倒。。（combobox当时测的可以）。