PDA

View Full Version : [solved]Element.update() , script element not execute



azheng
10 Apr 2009, 2:37 AM
Ext.namespace('xen.page');

xen.page.app = function() {
//private
var prop = "ext";
return {
text : "public text prop",
//public fun
getMsg : function() {
Ext.Msg.alert("public", this.text);//user this access pub prop
Ext.Msg.alert("private", prop);
}
};
}();

Ext.onReady(function() {
xen.page.app.getMsg();
});
when i test the simple code as above , it mess page display , i guess it's a bug
how do i to solve it?

aconran
10 Apr 2009, 4:30 AM
Works for me... Have you included the relevant CSS (ext-all.css)?

Have you made sure that it is successfully included and your path is correct?

Ext.Msg.alert re-uses a single global Window. That means that you will not see each of the public and private messages. You will only see the very last one. If you need to chain a series of alerts you should look into the callback configuration providing by Ext.Msg.alert (http://extjs.com/deploy/dev/docs/?class=Ext.MessageBox&member=alert).

azheng
10 Apr 2009, 6:54 AM
Works for me... Have you included the relevant CSS (ext-all.css)?

Have you made sure that it is successfully included and your path is correct?

Ext.Msg.alert re-uses a single global Window. That means that you will not see each of the public and private messages. You will only see the very last one. If you need to chain a series of alerts you should look into the callback configuration providing by Ext.Msg.alert (http://extjs.com/deploy/dev/docs/?class=Ext.MessageBox&member=alert).

it's css file include err:">
you are right: Ext.Msg.alert can not be juxtaposed



and happened another problem:

<!--parent page html-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext Test parent page</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" language="javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" language="javascript" src="parentpage.js"></script>
</head>
<body>
<div id="header"><input type="button" id="chlickme" value="click for update div content" /></div>
<div id="content">
no any girl here
</div>
</body>
</html>

<!-- parent page javascript -->

Ext.onReady(function() {
Ext.fly("chlickme").on("click", function(e) {
doit();
});
function doit() {
Ext.fly("content").getUpdater().update({
url : "subpage.html",
method : "get",
scripts : true,
callback : dosomething
});
Ext.fly("content").show();

function dosomething() {
//alert("msg: loaded");
}
}
});

<!--sub page html-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EXT Test sub page</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" language="javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" language="javascript" src="subpage.js"></script>
</head>
<body>
<div id="subcontent">There are many girls There are many girls There are many girls There are many girls There are many girls There are many girls...</div>
</body>
</html>

<!-- sub page javascript -->

Ext.namespace('xen.page');

xen.page.app = function() {
//private
var title = "ext msg";
return {
//public prop
text : "public prop here",
//public fun
getMsg : function() {
Ext.Msg.alert(title, this.text);//access private and pubic prop
}
};
}();

Ext.onReady(function() {
xen.page.app.getMsg();
});

//-------------
when i click the button , div updated , but javascript in subPage did not execute

is there some thing wrong again?

azheng
10 Apr 2009, 8:53 AM
I find that : when i click button, on sub page load:


Ext.onReady(function() {
xen.page.app.getMsg();//no execute
});
if "xen.page.app.getMsg();" not in "Ext.onReady" it's executed


it confusing me ...

mjlecomte
10 Apr 2009, 12:32 PM
http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

azheng
10 Apr 2009, 4:29 PM
http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly (http://extjs.com/forum/../learn/Ext_Forum_Help#How_to_post_code_properly)
It's helpful to me
not benefiting lightly

Condor
11 Apr 2009, 4:00 AM
Scripts in HTML fragments that are loaded by Ext.Updater should not use Ext.onReady(), but simply execute directly.

(the document is already loaded, so why should Ext.onReady fire?)

azheng
11 Apr 2009, 6:24 AM
Scripts in HTML fragments that are loaded by Ext.Updater should not use Ext.onReady(), but simply execute directly.

(the document is already loaded, so why should Ext.onReady fire?)

Yes, Ext.onReady() in subpage.html will not be fired, if I remove it ,
subpage.html and the script in it, can not be independent successful execute

mjlecomte
11 Apr 2009, 6:36 AM
If you want that page to be able to be both stand alone and to be referenced into another page, maybe you want Managed IFrames Extension.
http://extjs.com/forum/showthread.php?t=40961

azheng
11 Apr 2009, 6:57 AM
If you want that page to be able to be both stand alone and to be referenced into another page, maybe you want Managed IFrames Extension.
http://extjs.com/forum/showthread.php?t=40961

Thanks,your different way is what I need.
In this thread I understood all the issues?and has been a good solution,
thank all the answers

apostille
11 Apr 2009, 10:21 AM
I've just added some processing which really needs to execute after the updated Element has been fully rendered. It's setting up some complex stuff (A Toolbar with buttons that process stuff found in the Element) based on what is there.
It works fine with my overidden functions which I've been keeping in yui-ext-ext.js.
I really think there needs to be the capability to execute on completion of rendering. I think onUpdate should fire after rendering is complete.
Or perhaps there should be an onRender event, and update() only needs to apply the extra wait for that extra, added element if onUpdate has subscribers...
With more complex Ajax updates being applied, I can see the need to postprocess the updated element knowing for sure that it contains everythnig it is supposed to contain.

aconran
11 Apr 2009, 10:57 AM
I've just added some processing which really needs to execute after the updated Element has been fully rendered. It's setting up some complex stuff (A Toolbar with buttons that process stuff found in the Element) based on what is there.
It works fine with my overidden functions which I've been keeping in yui-ext-ext.js.
I really think there needs to be the capability to execute on completion of rendering. I think onUpdate should fire after rendering is complete.
Or perhaps there should be an onRender event, and update() only needs to apply the extra wait for that extra, added element if onUpdate has subscribers...
With more complex Ajax updates being applied, I can see the need to postprocess the updated element knowing for sure that it contains everythnig it is supposed to contain.

Doesn't the callback configuration do what you need?


autoLoad: {
url: 'sample.html',
scripts: true,
callback: function() {
alert('finished loading!');
}
}

azheng
12 Apr 2009, 4:41 AM
Doesn't the callback configuration do what you need?


autoLoad: {
url: 'sample.html',
scripts: true,
callback: function() {
alert('finished loading!');
}
}


How do I fire the "Ext.OnReady" in "sample.html" when Element.update callback execute