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,399
    Vote Rating
    849
    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
    166
    Vote Rating
    11
    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?");
    });





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

      0  

    Default


    I apologize.. apparently I didn't insert it correctly to show up as a code snippet.. not sure what formatting tool to use for that in this forum. At any rate, I will be deploying this as a JEE web app in a bit today and seeing if accessing it via a server request, instead of just a local file, will have it work correctly. As I said, using the direct URLs to the Sencha site for the js and css files works.

    If I can get it to work as a server deployed app, that is fine, as any site I use this with would be a much larger scale than the simple examples anyway. I was just following along with the book to start learning and the very first example didn't work for me from my local file system opening it up in the browser. I'll report back if it works or not from server deployment, I suspect it will and that the @import directive is not finding the relative path to the theme css file from within the ext-all.css file that does load.

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

      0  

    Default


    So...I have that book as well...and I can say that 4 out of the 5 exercises I tried did not work if you follow exactly the book example. Not to shame that book but it's obvious that there is some previous knowledge required to know what to do. I was able to get them to work just from my prior knowledge.

    I highly suggest you try the examples presented in the tutorials on this site. Those have helped me the most.

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

      0  

    Default


    Well.. I was correct in that deploying it on the server works. I did see in the book example they use <linkrel..> with no space.. which I should have caught. I am sure the @import doesn't work with local file system paths as everything else loaded fine. I deployed it as a simple JEE web app and so far things work now. Thanks for the replies.