29 Mar 2013 12:29 PM #1
Learn EXT-JS example doesn't work with ext-js 4.2
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:
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.
31 Mar 2013 7:20 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
Any errors in the console?
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
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 firstname.lastname@example.org
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.
31 Mar 2013 10:13 PM #3
31 Mar 2013 11:03 PM #4
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.
1 Apr 2013 9:12 AM #5
Post all your code.
1 Apr 2013 9:57 AM #6
The two files are below.. in the directory structure I listed above.
Ext.Msg.confirm("Confirm","Do you like ExtJS?");
1 Apr 2013 10:00 AM #7
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.
1 Apr 2013 12:11 PM #8
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.
1 Apr 2013 8:10 PM #9
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.