Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2013
    Location
    California
    Posts
    26
    Vote Rating
    1
    andjarnic is on a distinguished road

      0  

    Default Learn EXT-JS example doesn't work with ext-js 4.2

    Learn EXT-JS example doesn't work with ext-js 4.2


    Hi all,

    I am new to ext-js, just got the latest. I bought the book Learning EXT-JS 4. The very first example is not quite working for me. I verified in both Chrome and FireFox (both latest versions running on Windows 8) that it looks the same. The example does a simple Ext.Msg.alert("Alert","We're Ready!"); inside of the onReady function. I did a test alert("TEST") and that works. So I know that ext-js is loading. Looking at the CSS file, it shows @import '../ext-theme-classic/ext-theme-classic-all.css';

    I am guessing the theme is not loading, thus causing the dialog to show up inline in the page, instead of in a pop-up as it should. My guess then is that the ../ext-theme-classic is NOT being traversed from the location of my app. I have the following folder structure:

    /ext-js-4/ext-js
    /ext-js-4/test
    /ext-js-4/test/index.html
    /ext-js-4/test/js/app.js

    As I said, the index.html loads, it's finding the js/app.js and it's also finding the ../ext-js/ext-all-dev.js file as the Ext.onReady is working (my alert() worked).

    Is it possible that the ext-all-css.css @Import is failing to load the theme because of the path ../ not reaching the right directory? Is it trying to go from the test/ folder back one path instead of where the initial css file is loaded? If that is the case, then of course the theme file wouldn't be found because ../ from my test folder is the base path, not inside the ext-js folder that I have all the ext-js files in. The example has the same folder structure so I am unclear as to why this is not working.

    Thanks for any help.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    857
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Any errors in the console?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    California
    Posts
    26
    Vote Rating
    1
    andjarnic is on a distinguished road

      0  

    Default


    Thank you for the reply. Sadly, nothing shows up in either FF or Chrome JavaScript console. No errors, log output, etc. Seems odd something such as the first simple example would not work. I am sure it's my error somehow. But, given the simplicity of the example and that the alert() call works just fine, ext-js is loading, it's just the theme I am sure is not loading and am not sure what/why that may be.

  4. #4
    Sencha User
    Join Date
    Mar 2013
    Location
    California
    Posts
    26
    Vote Rating
    1
    andjarnic is on a distinguished road

      0  

    Default


    I've tried a number of things now. If the URL to the javascript and css uses the ext-js web site, all works fine. But when I use relative paths, while the javascript works, and the initial css (ext-all.css) loads, it seems to choke on the @import ../ext-theme-classic/ext-theme-classic-all.css seems to fail at loading. I've tried hard-coding the path directly, using various ../ and ../../, moving the folder to a sub-folder of where my index.html is and in that file using "css/ext-all.css" and so forth. Nothing seems to get the @import path to find/load that css. When I click on the link to ext-all.css in the console, it opens up the file correctly, which has the @import in it. If I then copy/paste that path into the browser, the themed css file shows up (as text) just fine.

    At a loss at this point, so I am going to try building a simple JEE web app and deploying it on glassfish to see if that will resolve the issue.

    I don't know enough about @import to understand why it may not work with local relative paths on the local filesystem.

  5. #5
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Sunnyvale, CA
    Posts
    148
    Vote Rating
    8
    MikeRH will become famous soon enough

      0  

    Default


    Post all your code.

  6. #6
    Sencha User
    Join Date
    Mar 2013
    Location
    California
    Posts
    26
    Vote Rating
    1
    andjarnic is on a distinguished road

      0  

    Default


    The two files are below.. in the directory structure I listed above.

    index.html:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>First program</title>
    <linkrel="stylesheet" type="text/css" href="../ext-js/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext-js/ext-all-dev.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
    </body>
    </html>

    app.js:

    Ext.onReady(function(){
    Ext.Msg.confirm("Confirm","Do you like ExtJS?");
    });