PDA

View Full Version : Panel Autoload and Execute JS



sunblack
8 Jun 2010, 3:07 AM
Hi , Every one:

i got a problem that made me sad .:s
i use Panel autoload to load a jsp


JsHelper.loadEditPage = function (){
mytabpanel.add(new Ext.Panel({
autoLoad : {
url : 'jsp1.jsp',
scripts : true
},
closable : true
}));
}

jsp1.jsp include many js files
for example :
js1,js2,js3
and i defined JSObject1 in js1 , JSObject2 in js2, Ext.onReady in js3


Ext.onReady(function(){
var obj1 = new JSObject1();
var obj2 = new JSObject2();
})


there is the problem , some time Ext.onReady() Run well , but some time it throw exception "JSObject1 is null or undefined", i think it is beacause JSObject1 load after Ext.onReady() ,so Ext.onReady() can not find JSObject1.
so , i change my idea :
i delete js3,then create a callback function for the "new Panel",like that:


JsHelper.loadEditPage = function (){
mytabpanel.add(new Ext.Panel({
autoLoad : {
url : 'jsp1.jsp',
scripts : true,
callback:function(){
var obj1 = new JSObject1();
var obj2 = new JSObject2();
}
},
closable : true
}));
}


5555555, the same result. the problem is that ,some time it happen , but some time it work well .
i wanna know that , is that some order in js load? how can i execute the js in js1 and js2(i find the function in this file only load ,but not execute ,beacause i type alert() there , and first time it is but execute , but second time it worked .)
i need your help ,,, thank you !

CrazyEnigma
8 Jun 2010, 12:25 PM
Think about it, in both instances you called the jsp page. In the first scenario, you call the jsp page which contains 3 includes: js1, js2, js3. Whatever they are, this doesn't mean that each of these objects have been created in sequential order. If they were in the same file, they would be. Ext JS to me is already loaded, so it fires immediately.

In the second scenario, the JSP has already loaded, and fires the callback, but it may not have created the objects yet, especially if they are JSP pages themselves. Unless you create a delay, but that doesn't seem to be the right call, because you are manually setting the delay value.

sunblack
8 Jun 2010, 9:22 PM
Thanks , CrazyEnigma!
your answer is very helpful for me .
i test it , these objects do not creat in sequential order. So , as you say , i make a delay,then find the answer.
i solve it as the following solvtion:
i create a JsHelper.js



Ext.namespace("JsHelper");
JsHelper.loadJsCount = 0; // the count of the js files which have to be load
/**
* dynamic load js and if the js is loaded it will JsHelper.loadJsCount--;
* @author [email protected]
* @since 2010-6-9
*/
JsHelper.dynamicLoadJs = function(file) {
var html_doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
js.setAttribute("defer", "true");
js.onreadystatechange = function() {
if(/(loaded)/.test(this.readyState)){
JsHelper.loadJsCount--;
}
}
html_doc.appendChild(js);
}
/**
* after js load this function will call the callback function
* @author [email protected]
* @since 2010-6-9
*/
JsHelper.afterJsLoad = function(callback){
if(JsHelper.loadJsCount != 0){
setTimeout(function(){
JsHelper.afterJsLoad(callback);
},50);
}else{
callback();
}
}


in the jsp file


<%@ page language="java" contentType="text/html;charset=utf-8" isErrorPage="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
<script type="text/javascript">
JsHelper.loadJsCount = ${jscount}; // the sum of js files
</script>
<c:forEach items="${jspath}" var="path"> // load js file
<script type="text/javascript">
JsHelper.dynamicLoadJs("QPMS/js/${path}");
</script>
</c:forEach>
</body>
</html>


the i can use the function "JsHelper.afterJsLoad" in any js file (which is autoload by panel)
replace the function Ext.onReady()
for example :



JsHelper.afterJsLoad(function(){
var _obj = new JSObject1();
});