初学EXT有些地方不是很明确特抛出小弟我遇到的一个有关问题 _Web前端

初学EXT有些地方不是很明确特抛出我遇到的一个问题
问题描述：我用Ext.getDom("dddd").innerHTML想将id为dddd的元素放到title为“第二个条”的容器里面去，但是不能成功代码如下。

<html>   
    <head>   
           
  
        <title>My JSP 'index.jsp' starting page</title>   
        <meta http-equiv="pragma" content="no-cache">   
        <meta http-equiv="cache-control" content="no-cache">   
        <script type="text/javascript" src="adapter/ext/ext-base.js"></script>   
        <script type="text/javascript" src="resources/js/ext-all.js"></script>   
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />   
        <link rel="stylesheet" type="text/css" href="resources/css/common.css" />   
  
  
    <!--   
    <link rel="stylesheet" type="text/css" href="styles.css">   
    -->   
    </head>   
  
    <body>   
        <script type="text/javascript">   
        var tabPanel=new Ext.TabPanel({   
                id:"tabPanel",   
                   region:'center',   
                   deferredRender:false,   
                   activeTab:0,   
                   iconCls: 'tabs',   
                   items:[{   
                       contentEl:'center',   
                       title: '主页',   
                       autoScroll:true  
                   }]   
            });   
             
               
           
    new Ext.Viewport({     
           
    layout:"border",   
    items:[{region:"north",height:70,html:"<h1 align='center'>我的样式</h1>"},   
       
    {title:"菜单",   
    id:'menu',   
    region:"west",   
    width:200,   
    collapsible:true,   
    split:true,   
    layout:'accordion',   
    items:[{title:'第一个条',html:"<input type='button' value='点击这里弹出窗体' onclick='showwin();' id='aa'>", autoScroll:true, iconCls:'user', border:false},{title:'第二个条',html:Ext.getDom("dddd").innerHTML, autoScroll:true, iconCls:'unit', border:false}]   
            },   
    {xtype:"tabpanel",region:"center",items:[{title:"面板1",html:'面板一里面的内容'},{title:"面板2",html:'面板2的内容'}]   
    }]   
    });    
    function showalert(){   
    Ext.MessageBox.alert('提示', '是个什么样式的弹出框呢？');   
    }   
    function showwin(){   
   var win=new Ext.Window({title:'一个窗体',width:200,height:200,html:'<h1>测试信息</h1>'});   
   win.show();   
    }   
    function showtest(){   
    Ext.MessageBox.alert('提示', Ext.getDom("dddd").innerHTML);   
    }   
    </script>   
    <div id='aaaa'><input type='button' value='点击这里弹出窗体' onclick='showwin();' id='aa'></div>     
    <div id='bbbb'><input type='button' value='点击这里弹出警告框' onclick='showalert();' id='bb'></div>   
    <div id='xxxx'><input type='button' value='点击这里弹出测试信息对话框' onclick='showtest();'></div>   
    <div id="dddd">在div里面的测试信息</div>   
    <input type="hidden" value="测试消息" id="cccc">     
    </body>   
</html>  

<html>
	<head>
		

		<title>My JSP 'index.jsp' starting page</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="resources/js/ext-all.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="resources/css/common.css" />


	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	</head>

	<body>
		<script type="text/javascript">
		var tabPanel=new Ext.TabPanel({
            	id:"tabPanel",
                   region:'center',
                   deferredRender:false,
                   activeTab:0,
                   iconCls: 'tabs',
                   items:[{
                       contentEl:'center',
                       title: '主页',
                       autoScroll:true
                   }]
          	});
          
          	
		
  	new Ext.Viewport({	
  		
  	layout:"border",
  	items:[{region:"north",height:70,html:"<h1 align='center'>我的样式</h1>"},
  	
  	{title:"菜单",
  	id:'menu',
  	region:"west",
  	width:200,
  	collapsible:true,
  	split:true,
  	layout:'accordion',
  	items:[{title:'第一个条',html:"<input type='button' value='点击这里弹出窗体' onclick='showwin();' id='aa'>", autoScroll:true, iconCls:'user', border:false},{title:'第二个条',html:Ext.getDom("dddd").innerHTML, autoScroll:true, iconCls:'unit', border:false}]
          	},
  	{xtype:"tabpanel",region:"center",items:[{title:"面板1",html:'面板一里面的内容'},{title:"面板2",html:'面板2的内容'}]
  	}]
  	});	
    function showalert(){
    Ext.MessageBox.alert('提示', '是个什么样式的弹出框呢？');
    }
    function showwin(){
   var win=new Ext.Window({title:'一个窗体',width:200,height:200,html:'<h1>测试信息</h1>'});
   win.show();
    }
    function showtest(){
    Ext.MessageBox.alert('提示', Ext.getDom("dddd").innerHTML);
    }
    </script>
	<div id='aaaa'><input type='button' value='点击这里弹出窗体' onclick='showwin();' id='aa'></div>	
	<div id='bbbb'><input type='button' value='点击这里弹出警告框' onclick='showalert();' id='bb'></div>
	<div id='xxxx'><input type='button' value='点击这里弹出测试信息对话框' onclick='showtest();'></div>
	<div id="dddd">在div里面的测试信息</div>
	<input type="hidden" value="测试消息" id="cccc">	
	</body>
</html>

起初我认为是Ext.getDom("dddd").innerHTML这个方法用的不对，特意将这个方法做了一个测试代码如下Java代码


<input type='button' value='点击这里弹出测试信息对话框' onclick='showtest();'>   
function showtest(){   
    Ext.MessageBox.alert('提示', Ext.getDom("dddd").innerHTML);   
    }  

<input type='button' value='点击这里弹出测试信息对话框' onclick='showtest();'>
function showtest(){
    Ext.MessageBox.alert('提示', Ext.getDom("dddd").innerHTML);
    }

发觉这样调用是对的，那我为什么不能把dddd放到title为“第二个条”的容器里面去呢？谢谢