Ext onReady 加载页面的有关问题 _Web前端

Ext onReady 加载页面的问题

1。使用Ext.onReady（）,发现ext内部报空指针错误，用Null.createChild()了。

?使用<%
??? request.setAttribute("decorator", "none");
??? response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
??? response.setHeader("Pragma","no-cache"); //HTTP 1.0
??? response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
<%@page language="java" contentType="text/html; charset=UTF-8"
?pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="w" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/ext-all.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/button.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/workbench.css" />
?<script type="text/javascript" src="../AjaxExt/adapter/ext/ext-base-debug.js"></script>
?<script type="text/javascript" src="../AjaxExt/ext-all-debug.js"></script>
?
<title>View <s:text name="#parameters.action" /></title>
<script type="text/javascript">
Ext.onReady(function(){
?????? var tabs = new Ext.TabPanel({
?????? ?renderTo: "tab1",
????????? width:800,
?????????? activeTab: 0,
??????? deferredRender: false,??
?????????? height:400,
?????????? bufferResize:true,
?????????? monitorResize:true,
?????????? bodyStyle:'background-color:#3CA9C4;padding-top:5px;padding-left:1px;',
?????????? enableTabScroll:true
?????? });
?????? var tabcontent;
?????? <s:if test="allModules.size > 0">
?????? <s:iterator value="allModules" id="obj">
?????? ?<s:if test="#obj.components.size > 0">
?????? ?? var subTabs = new Ext.TabPanel({
???????????????? width:598,
???????????????? activeTab: 0,
???????????????? deferredRender: false,
???????????????? height:200,
?????????????? //? title:'<s:property value="#obj.moduleName" />',
???????????????? title:'<s:property value="#obj.i18N" />',
???????????????? enableTabScroll:true,
???????????????? autoScroll : true
???????????? });
??????<s:iterator value="#obj.components" id="comp">
???????<s:if test="#comp.id in entryComponent">
????????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? checked=\"checked\" name=componentList value='<s:property value="#comp.id" />'><s:text name="Entity.Role.privilege.enterComponent"/> ";
???????
???????</s:if>
????????? <s:if test="#comp.id not in entryComponent">
???????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? name=componentList value='<s:property value="#comp.id" />'> <s:text name="Entity.Role.privilege.enterComponent"/> ";

??????</s:if >
?????<s:if test="#comp.id in entryAllowAll">
???????????
???????? functions=functions+"<input type=checkbox onclick=\"enableEntry(this,'<s:property value="#comp.id" />'); \" id=allow<s:property value="#comp.id" /> checked=\"checked\" name=componentAllowAll value='<s:property value="#comp.id" />'><s:text name="Entity.Role.privilege.allowAllFunction"/> <br><br>";

?????</s:if >
?????<s:if test="#comp.id not in entryAllowAll">
????????functions=functions+"<input type=checkbox onclick=\"enableEntry(this,'<s:property value="#comp.id" />'); \" id=allow<s:property value="#comp.id" /> name=componentAllowAll value='<s:property value="#comp.id" />'><s:text name="Entity.Role.privilege.allowAllFunction"/>? <br><br>";

?????</s:if >
?????
?????
?????
?????
?????<s:if test="#comp.functionList.size > 0">
?????? <s:if test="#comp.id in entryAllowAll">
??????? ?functions=functions+"<div id=function<s:property value="#comp.id" /> style=\"visibility:hidden;\"><s:text name="Entity.Role.privilege.setFunctionPoints"/><br>";
??????</s:if>?
??????<s:if test="#comp.id not in entryAllowAll">
?????????functions=functions+"<div id=function<s:property value="#comp.id" /> style=\"visibility:visible;\"><s:text name="Entity.Role.privilege.setFunctionPoints"/><br>";
??????</s:if >
??????
????????<s:iterator value="#comp.functionList" id="func" status="st">
?????????? <s:if test="#func.id in roleFunctionNames">
????????? ??functions=functions+"<input type=checkbox name=functionList onclick=\"enablePrivilege(this,'<s:property value="#comp.id" />'); \"? checked=\"checked\"? value='<s:property value="#func.id" />'>"+'<s:text name="Function.%{#func.id}" />'+'         ';
?????????</s:if>
?????????<s:if test="#func.id not in roleFunctionNames">
??????????functions=functions+"<input type=checkbox name=functionList onclick=\"enablePrivilege(this,'<s:property value="#comp.id" />'); \"? value='<s:property value="#func.id" />'>"+'<s:text name="Function.%{#func.id}" />'+'         ';
?????????</s:if >
?????????<s:if test="#st.count%3==0">
???????????functions=functions+"<br>";
?????????</s:if >
???????? </s:iterator>
????????? functions=functions+"</div>";
?????
?????</s:if >
?????
?????subTabs.add({title:'<s:property value="#comp.i18N" />', autoScroll : true,autoShow:false,html:functions}).show();
??????</s:iterator>??
?????? ? tabs.add(subTabs).show();

?????? ?</s:if>
?????? ?
?????? ?
?????? ?
?????? ?
?????? <s:else >
?????? tabs.add({title:'<s:property value="obj.i18N" />'}).show();
??????
????</s:else>
????</s:iterator>
?????? ??
?? ????</s:if>
?? ????<s:else>
?? ????</s:else>
?? ??tabs.setActiveTab(0);
??});

}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="10">
??<s:form action="%{#parameters.action}/savePrivileges">
???<s:hidden name="id" label="ID" />
???<s:hidden name="obj.id" label="ID" />

结果不能正确显示TabPanel,后来发现是onReady 中加载的时候出现问题，后来改为带延迟的。

<%
??? request.setAttribute("decorator", "none");
??? response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
??? response.setHeader("Pragma","no-cache"); //HTTP 1.0
??? response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
<%@page language="java" contentType="text/html; charset=UTF-8"
?pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="w" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/ext-all.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/button.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/workbench.css" />
?<script type="text/javascript" src="../AjaxExt/adapter/ext/ext-base-debug.js"></script>
?<script type="text/javascript" src="../AjaxExt/ext-all-debug.js"></script>
?
<title>View <s:text name="#parameters.action" /></title>
<script type="text/javascript">
Ext.onReady(function(){
?????? var tabs = new Ext.TabPanel({
?????? ?renderTo: "tab1",
????????? width:800,
?????????? activeTab: 0,
??????? deferredRender: false,??
?????????? height:400,
?????????? bufferResize:true,
?????????? monitorResize:true,
?????????? bodyStyle:'background-color:#3CA9C4;padding-top:5px;padding-left:1px;',
?????????? enableTabScroll:true
?????? });
?????? var tabcontent;
?????? <s:if test="allModules.size > 0">
?????? <s:iterator value="allModules" id="obj">
?????? ?<s:if test="#obj.components.size > 0">
?????? ?? var subTabs = new Ext.TabPanel({
???????????????? width:598,
???????????????? activeTab: 0,
???????????????? deferredRender: false,
???????????????? height:200,
?????????????? //? title:'<s:property value="#obj.moduleName" />',
???????????????? title:'<s:property value="#obj.i18N" />',
???????????????? enableTabScroll:true,
???????????????? autoScroll : true
???????????? });
??????<s:iterator value="#obj.components" id="comp">
???????<s:if test="#comp.id in entryComponent">
????????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? checked=\"checked\" name=componentList value='<s:property value="#comp.id" />'><s:text name="Entity.Role.privilege.enterComponent"/> ";
???????
???????</s:if>
????????? <s:if test="#comp.id not in entryComponent">
???????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? name=componentList value='<s:property value="#comp.id" />'> <s:text name="Entity.Role.privilege.enterComponent"/> ";

???<div id="tab1"></div>
???
???
???<input type="submit" class="button"
????value="<s:text name='General.Button.submit'/>" />
???<input type="button" class="button"
????value="<s:text name='General.Button.return'/>"
????onClick="javascript: history.go(-1);" />
????
????
??</s:form>
??
??
?</body>
</html>
2.问题解决，但是现出现两个按钮，然后出现整个页面和两个按钮。以为是Ext的问题，因为将Ext.onReady()放到body最后面也是这个效果。后来又发现可以这样做，就完美解决了。

<%
??? request.setAttribute("decorator", "none");
??? response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
??? response.setHeader("Pragma","no-cache"); //HTTP 1.0
??? response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
<%@page language="java" contentType="text/html; charset=UTF-8"
?pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="w" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/ext-all.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/button.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/workbench.css" />
?<script type="text/javascript" src="../AjaxExt/adapter/ext/ext-base-debug.js"></script>
?<script type="text/javascript" src="../AjaxExt/ext-all-debug.js"></script>
?
<title>View <s:text name="#parameters.action" /></title>
<script type="text/javascript">
function a (){
?????? var tabs = new Ext.TabPanel({
?????? ?renderTo: "tab1",
????????? width:800,
?????????? activeTab: 0,
??????? deferredRender: false,??
?????????? height:400,
?????????? bufferResize:true,
?????????? monitorResize:true,
?????????? bodyStyle:'background-color:#3CA9C4;padding-top:5px;padding-left:1px;',
?????????? enableTabScroll:true
?????? });
?????? var tabcontent;
?????? <s:if test="allModules.size > 0">
?????? <s:iterator value="allModules" id="obj">
?????? ?<s:if test="#obj.components.size > 0">
?????? ?? var subTabs = new Ext.TabPanel({
???????????????? width:598,
???????????????? activeTab: 0,
???????????????? deferredRender: false,
???????????????? height:200,
?????????????? //? title:'<s:property value="#obj.moduleName" />',
???????????????? title:'<s:property value="#obj.i18N" />',
???????????????? enableTabScroll:true,
???????????????? autoScroll : true
???????????? });
??????<s:iterator value="#obj.components" id="comp">
???????<s:if test="#comp.id in entryComponent">
????????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? checked=\"checked\" name=componentList value='<s:property value="#comp.id" />'><s:text name="Entity.Role.privilege.enterComponent"/> ";
???????
???????</s:if>
????????? <s:if test="#comp.id not in entryComponent">
???????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? name=componentList value='<s:property value="#comp.id" />'> <s:text name="Entity.Role.privilege.enterComponent"/> ";

?????</s:if >
?????
?????
?????
?????
?????<s:if test="#comp.functionList.size > 0">
?????? <s:if test="#comp.id in entryAllowAll">
??????? ?functions=functions+"<div id=function<s:property value="#comp.id" /> style=\"visibility:visible;\"><s:text name="Entity.Role.privilege.setFunctionPoints"/><br>";
??????</s:if>?
??????<s:if test="#comp.id not in entryAllowAll">
?????????functions=functions+"<div id=function<s:property value="#comp.id" /> style=\"visibility:visible;\"><s:text name="Entity.Role.privilege.setFunctionPoints"/><br>";
??????</s:if >
??????
????????<s:iterator value="#comp.functionList" id="func" status="st">
?????????? <s:if test="#func.id in roleFunctionNames">
????????? ??functions=functions+"<input type=checkbox name=functionList? onclick=\"enablePrivilege(this,'<s:property value="#comp.id" />','<s:property value="#func.id" />'); \"???? id=allow<s:property value="#comp.id" /><s:property value="#func.id" />? checked=\"checked\"? value='<s:property value="#func.id" />'>"+'<s:text name="Function.%{#func.id}" />'+'         ';
?????????</s:if>
?????????<s:if test="#func.id not in roleFunctionNames">
??????????functions=functions+"<input type=checkbox name=functionList? onclick=\"enablePrivilege(this,'<s:property value="#comp.id" />','<s:property value="#func.id" />'); \"???? id=allow<s:property value="#comp.id" /><s:property value="#func.id" />? value='<s:property value="#func.id" />'>"+'<s:text name="Function.%{#func.id}" />'+'         ';
?????????</s:if >
?????????<s:if test="#st.count%1==0">
???????????functions=functions+"<br>";
?????????</s:if >
???????? </s:iterator>
????????? functions=functions+"</div>";
?????
?????</s:if >
?????
?????subTabs.add({title:'<s:property value="#comp.i18N" />', autoScroll : true,autoShow:false,html:functions}).show();
??????</s:iterator>??
?????? ? tabs.add(subTabs).show();

function enableEntry(me,entrycomponent){

?var oo=document.getElementById('function'+entrycomponent);
?var ooo=oo.getElementsByTagName('INPUT');
?
?
?if(me.checked){
??if(oo!=null){
??oo.style.visibility='visible';
??}
??if(ooo!=null){
??? for(i=0;i<ooo.length;i++){
?????? if(!ooo[i].checked)
??? ??ooo[i].checked = true;
??? }
??
??}
??
?}else{
??if(oo!=null)oo.style.visibility='visible';
??if(ooo!=null){
??? for(i=0;i<ooo.length;i++){
?????? if(ooo[i].checked)
??? ??ooo[i].checked = false;
??? }
??
??}
?}
?
?
}

3.后来发现上面的不够标准，改用window.onload()解决如下

<%
??? request.setAttribute("decorator", "none");
??? response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
??? response.setHeader("Pragma","no-cache"); //HTTP 1.0
??? response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
<%@page language="java" contentType="text/html; charset=UTF-8"
?pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="w" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/ext-all.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/css/button.css" />
?<link rel="stylesheet" type="text/css"
??href="../AjaxExt/resources/workbench.css" />
?<script type="text/javascript" src="../AjaxExt/adapter/ext/ext-base-debug.js"></script>
?<script type="text/javascript" src="../AjaxExt/ext-all-debug.js"></script>
?
<title>View <s:text name="#parameters.action" /></title>
<script type="text/javascript">
window.onload = a;
function a (){
?????? var tabs = new Ext.TabPanel({
?????? ?renderTo: "tab1",
????????? width:800,
?????????? activeTab: 0,
??????? deferredRender: false,??
?????????? height:400,
?????????? bufferResize:true,
?????????? monitorResize:true,
?????????? bodyStyle:'background-color:#3CA9C4;padding-top:5px;padding-left:1px;',
?????????? enableTabScroll:true
?????? });
?????? var tabcontent;
?????? <s:if test="allModules.size > 0">
?????? <s:iterator value="allModules" id="obj">
?????? ?<s:if test="#obj.components.size > 0">
?????? ?? var subTabs = new Ext.TabPanel({
???????????????? width:598,
???????????????? activeTab: 0,
???????????????? deferredRender: false,
???????????????? height:200,
?????????????? //? title:'<s:property value="#obj.moduleName" />',
???????????????? title:'<s:property value="#obj.i18N" />',
???????????????? enableTabScroll:true,
???????????????? autoScroll : true
???????????? });
??????<s:iterator value="#obj.components" id="comp">
???????<s:if test="#comp.id in entryComponent">
????????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? checked=\"checked\" name=componentList value='<s:property value="#comp.id" />'><s:text name="Entity.Role.privilege.enterComponent"/> ";
???????
???????</s:if>
????????? <s:if test="#comp.id not in entryComponent">
???????var functions=''+"<input type=checkbox id=entry<s:property value="#comp.id" />? onclick=\"disableAll(this,'<s:property value="#comp.id" />'); \"? name=componentList value='<s:property value="#comp.id" />'> <s:text name="Entity.Role.privilege.enterComponent"/> ";

?????</s:if >
?????
?????
?????
?????
?????<s:if test="#comp.functionList.size > 0">
?????? <s:if test="#comp.id in entryAllowAll">
??????? ?functions=functions+"<div id=function<s:property value="#comp.id" /> style=\"visibility:visible;\"><s:text name="Entity.Role.privilege.setFunctionPoints"/><br>";
??????</s:if>?
??????<s:if test="#comp.id not in entryAllowAll">
?????????functions=functions+"<div id=function<s:property value="#comp.id" /> style=\"visibility:visible;\"><s:text name="Entity.Role.privilege.setFunctionPoints"/><br>";
??????</s:if >
??????
????????<s:iterator value="#comp.functionList" id="func" status="st">
?????????? <s:if test="#func.id in roleFunctionNames">
????????? ??functions=functions+"<input type=checkbox name=functionList? onclick=\"enablePrivilege(this,'<s:property value="#comp.id" />','<s:property value="#func.id" />'); \"???? id=allow<s:property value="#comp.id" /><s:property value="#func.id" />? checked=\"checked\"? value='<s:property value="#func.id" />'>"+'<s:text name="Function.%{#func.id}" />'+'         ';
?????????</s:if>
?????????<s:if test="#func.id not in roleFunctionNames">
??????????functions=functions+"<input type=checkbox name=functionList? onclick=\"enablePrivilege(this,'<s:property value="#comp.id" />','<s:property value="#func.id" />'); \"???? id=allow<s:property value="#comp.id" /><s:property value="#func.id" />? value='<s:property value="#func.id" />'>"+'<s:text name="Function.%{#func.id}" />'+'         ';
?????????</s:if >
?????????<s:if test="#st.count%1==0">
???????????functions=functions+"<br>";
?????????</s:if >
???????? </s:iterator>
????????? functions=functions+"</div>";
?????
?????</s:if >
?????
?????subTabs.add({title:'<s:property value="#comp.i18N" />', autoScroll : true,autoShow:false,html:functions}).show();
??????</s:iterator>??
?????? ? tabs.add(subTabs).show();

function enableEntry(me,entrycomponent){