Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    33
    Vote Rating
    0
    andy13c72back is on a distinguished road

      0  

    Default [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...


    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

  2. #2
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    61
    Vote Rating
    0
    Shyru is on a distinguished road

      0  

    Exclamation


    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
    Last edited by Shyru; 24 Mar 2011 at 1:18 AM. Reason: Added info about PR5

  3. #3
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    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.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    61
    Vote Rating
    0
    Shyru is on a distinguished road

      0  

    Default


    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

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    61
    Vote Rating
    0
    Shyru is on a distinguished road

      0  

    Default


    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>

  6. #6
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


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


    best regards
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    61
    Vote Rating
    0
    Shyru is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    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.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    33
    Vote Rating
    0
    andy13c72back is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. [FIXED-EXTJSIV-190] TabCloseMenu
    By James Goddard in forum Ext:Bugs
    Replies: 2
    Last Post: 7 Apr 2011, 5:35 AM
  2. [CLOSED-EXTJSIV-267] validator and IE
    By wki01 in forum Ext:Bugs
    Replies: 1
    Last Post: 6 Apr 2011, 9:32 AM
  3. Replies: 0
    Last Post: 21 Mar 2011, 9:37 AM
  4. Replies: 2
    Last Post: 18 Mar 2011, 2:11 PM
  5. extjs core 3.0 getHeiht() on body
    By ostghost in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 18 Jun 2009, 2:37 AM

Thread Participants: 3