[OPEN-EXTJSIV-302] If you put ext-core.js at the end of the body...

**andy13c72back** · 17 Mar 2011 2:39 AM

If you put ext-core.js at the end of the body, some ext init process would produce unexpected result. For example, chrome definitely supports css3 BorderRadius and LinearGradient, but it will add class "x-nbr"(for 'no border radius') and "x-nlg"(for 'no linear gradient') to the body element if you put ext-core.js at the end of the body.

please test it by yourself.
Many thx

**Shyru** · 24 Mar 2011 1:17 AM

I was also struck by this problem. It took me quite some hours of testing to find this out. Thats also a problem because it is no where documented how a html-page has to be set up for Ext JS 4.
And i dont think it matters where the script tag is added in the body, a also tried it inbetween some tags and containers and it would produce the same result.
But since ext-core.js is also 168 KB big, it would be very good from a performance perspective to be able to load it in the body.
Can this be fixed?
Edit: This also happens in PR5

**steffenk** · 24 Mar 2011 2:15 AM

This is a general matter and not specific to EXT4.

Moving js to footer, you must move all js to footer, as the loading order is important always.

**Shyru** · 24 Mar 2011 5:22 AM

This IS a Problem of Ext JS 4.
ExtJS 3: Loading JS files in correct order in head: works
ExtJS 3: Loading JS files in correct order in body: works
ExtJS 4: Loading JS files in correct order in head: works
ExtJS 4: Loading JS files in correct order in body: works a bit, but CSS capabilities of browsers are not correctly detected. (As mentioned in first post).
ExtJS 4: Loading core in head and ext-all in body: works

**Shyru** · 24 Mar 2011 5:42 AM

Here is a simple example that demonstrates the problem:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Button Examples</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <!--
    If you uncomment this, all starts working correctly.
    <script type="text/javascript" src="../ext-core.js"></script>
    -->
</head>
<body>
<h1>Load order example</h1>
    

<p>When ext-core.js and ext-all.js are both loaded in the body, ext-js misdetects CSS capabilities of the browser and all looks ugly.</p>

<p>If you uncomment the loading of ext-core in the head, all works flawlessly.</p>

<script type="text/javascript" src="../ext-core.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.Msg.alert('CSS Error', 'Look at the CSS misdetection!<br/>Class-names x-nbr and x-nlg are added to body which breaks a lot of things.');

	});

</script>
</body>
</html>

**tobiu** · 24 Mar 2011 6:04 AM

you really should not include big js-files inside the body tag.
keep your DOM small!

best regards
tobiu

**Shyru** · 24 Mar 2011 6:30 AM

I always thought that putting .js-files in to the body was good practice to reduce the initial load-time of a page. If I load 2-3 MB of javascript in the head it takes some time to even display a loading message or something like this, because the dom is only "executed" after all the javascript files have been loaded.
And i dont think that loading a big javascript file in the body makes the dom bigger. I thought when we talk about a big dom we mean many nested tags with lots of attributes and so on. But having a big javascript file inside the body should not make a difference. - If its in the head its also in the document (DOM) and available to dom-access methods like it would be in the body.

**steffenk** · 24 Mar 2011 10:40 AM

It's one of the Yahoo rules (YSLOW): moving js load to footer of body.
The reason is simple: browser first loads DOM and display, then the js will be loaded.
Having all in head, browser start render after loading all files from head.

**andy13c72back** · 27 Mar 2011 11:10 PM

Yes, I agree with Shyru. Hope this can be improved by the final release of extjs 4 and enable us to reduce initial load time of a big web app.

[OPEN-EXTJSIV-302] If you put ext-core.js at the end of the body...

Thread Tools

Search Thread

Display

[OPEN-EXTJSIV-302] If you put ext-core.js at the end of the body...

[OPEN-EXTJSIV-302] If you put ext-core.js at the end of the body...

Similar Threads

[FIXED-EXTJSIV-190] TabCloseMenu

[CLOSED-EXTJSIV-267] validator and IE

[OPEN-EXTJSIV-107] localization: only core seems to be localized

[OPEN-EXTJSIV-12] Checkboxgroup cut off in IE7

extjs core 3.0 getHeiht() on body