PDA

View Full Version : Spring MVC, ExtJS, Sample HTML



btlife
20 Dec 2010, 10:10 AM
Hi All,

I am having an issue where my <script> tags stop working after the


<script type="text/javascript"src="/frap/resources/ext-3.3.1/adapter/ext/ext-base.js"></script>


In firebug all the javascript and css is retrieved until the above is retrieved then nothing afterwards loads.
If I add a semi-colon script tag after the script include like this:



<script type="text/javascript">
;
</script>

After ext-base.js and ext-all-debug.js, then I get the console woohoo.

I'm very new to ExtJs, so I probably have something setup wrong.
I'm using Spring ROO created project, that has Spring MVC, and Tiles.
I setup a simple layout extjs.jspx:



<

html xmlns:jsp="http://java.sun.com/JSP/Page"xmlns:c="http://java.sun.com/jsp/jstl/core"xmlns:tiles="http://tiles.apache.org/tags-tiles"xmlns:spring="http://www.springframework.org/tags"xmlns:util="urn:jsptagdir:/WEB-INF/tags/util">

<jsp:output doctype-root-element="HTML"doctype-system="about:legacy-compat"/>

<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title id='title'>HTML Page setup Tutorial</title>





<!-- ** CSS ** -->

<!-- base library -->
<link rel="stylesheet"type="text/css"href="/frap/resources/ext-3.3.1/resources/css/ext-all.css"/>





<!-- overrides to base library -->





<!-- ** Javascript ** -->

<!-- ExtJS library: base/adapter -->
<script type="text/javascript"src="/frap/resources/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript">
;
</script>





<script type="text/javascript"src="/frap/resources/ext-3.3.1/ext-all-debug.js"></script>

<script type="text/javascript">
;
</script>
<!-- ExtJS library: all widgets -->






<!-- overrides to library -->




<!-- extensions -->




<!-- page specific -->




<script type="text/javascript">

// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL =




'/frap/resources/ext-3.3.1/resources/images/default/s.gif';



Ext.onReady(function(){




console.info('woohoo!!!');




}); //end onReady

</script>





</head>

<body>
</body>


</html>






<tiles-definitions>

<

definition name="extjs"template="/WEB-INF/layouts/extjs.jspx">


<put-attribute name="header"value="/WEB-INF/views/header.jspx"/>

<put-attribute name="footer"value="/WEB-INF/views/footer.jspx"/>
</definition>




</tiles-definitions>



There is no header.jspx, or footer.jspx being added, as I didn't put any header or footer tile insert into the file.


View Source before adding the semi-colon script tag(it's not loading the ext-all-debug.js, unless I put in the semi-colon script tag:



<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE HTML SYSTEM "about:legacy-compat"><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><title id="title">HTML Page setup Tutorial</title><link href="/frap/resources/ext-3.3.1/resources/css/ext-all.css (http://www.sencha.com/forum/view-source:http://localhost:8080/frap/resources/ext-3.3.1/resources/css/ext-all.css)" type="text/css" rel="stylesheet"/><script src="/frap/resources/ext-3.3.1/adapter/ext/ext-base.js (http://www.sencha.com/forum/view-source:http://localhost:8080/frap/resources/ext-3.3.1/adapter/ext/ext-base.js)" type="text/javascript"/><script src="/frap/resources/ext-3.3.1/ext-all-debug.js" type="text/javascript"/><script type="text/javascript"> // Path to the blank image should point to a valid location on your server Ext.BLANK_IMAGE_URL = '/frap/resources/ext-3.3.1/resources/images/default/s.gif'; Ext.onReady(function(){ console.info('woohoo!!!'); }); //end onReady </script></head><body/></html>






Any help would be appreciated

Foster
20 Dec 2010, 10:49 AM
have you gone through this example and set up a working extjs page with no frills?

http://www.sencha.com/learn/Tutorial:HTML_Page_Setup

Maybe you could try to compare that to what you have, and it could be something basic like your folder structure, the ext blank image, or some other typo in your page

btlife
20 Dec 2010, 10:59 AM
have you gone through this example and set up a working extjs page with no frills?

http://www.sencha.com/learn/Tutorial:HTML_Page_Setup

Maybe you could try to compare that to what you have, and it could be something basic like your folder structure, the ext blank image, or some other typo in your page


That's what I am trying to get working, as you can see from the View Source above the output is almost exactly the same as the sample document, but it won't process the <script> tag to load the ext-all-debug.js unless I put in the semi-colon script tag.

Foster
20 Dec 2010, 11:08 AM
If you browse out to your file does ext-base.js have code in it, try switching to ext-base-debug.js if not

-Also can you try this
1) when you browse in firebug and expand the html /head and see all the scripts, can you expand them and does it show the javascript from the ext base files?

btlife
20 Dec 2010, 11:30 AM
If you browse out to your file does ext-base.js have code in it, try switching to ext-base-debug.js if not

-Also can you try this
1) when you browse in firebug and expand the html /head and see all the scripts, can you expand them and does it show the javascript from the ext base files?

Yes I can see ext-base.js script. If I put any script containing a semi-colon after the ext-base.js statement then the ext-all-debug.js will load and I can see it firebug.

It looks like ext-base.js is not being closed for some reason.


<html xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:tiles="http://tiles.apache.org/tags-tiles" xmlns:spring="http://www.springframework.org/tags" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" >
<jsp:output doctype-root-element="HTML" doctype-system="about:legacy-compat" />
<jsp:directive.page contentType="text/html;charset=UTF-8" />

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel='stylesheet' type='text/css' href='/frap/resources/ext-3.3.1/resources/css/ext-all.css' />
<script type="text/javascript">
console.info('stylesheet loaded');
</script>
<script type='text/javascript' src='/frap/resources/ext-3.3.1/adapter/ext/ext-base.js'></script>
<script type="text/javascript">
console.info('ext-base.js loaded');
</script>
<script type='text/javascript' src='/frap/resources/ext-3.3.1/ext-all-debug.js'></script>
<script type="text/javascript">
console.info('ext-all-debug.js loaded');
</script>
<script type='text/javascript'>
Ext.BLANK_IMAGE_URL = '/frap/resources/ext-3.3.1/resources/images/default/s.gif';

Ext.onReady(function(){

console.info('woohoo!!!');

}); //end onReady
</script>
<script type="text/javascript">
console.info('blank image url loaded');
</script>
</head>
<body>
</body>
</html>

I added a console.info call after each script. now it loads everything.
Console out put is:
stylesheet loadedindex (line 4)


blank image url loadedindex (line 18)


woohoo!!!


Which leads me to believe the missing ones "closed" the 2 script calls.
Any idea what would cause the scripts from not loading. I don't even get a GET request for them in firebug, if the semi-colon isn't in a script tag after the script include.

Thanks a lot for trying to help me by the way, REALLY appreciate it.

btlife
20 Dec 2010, 11:46 AM
I redid the Sample HTML tutorial, and placed test.html in my extjs folder (under my webapp). I then pointed the browser at it and it loaded it fine.

So I guess it has something to do with Spring MVC, Apache Tiles, or JSPX.

Do you know if there are any sample setups or anything? Is there anything special I should have to do for a JSPX outputting HTML, versus the straight HTML file?

Thank-you again for you time :)

Foster
20 Dec 2010, 11:55 AM
Not really sure. I am using JSP/Spring MVC on my project but not apache tiles. I tried to look in some of my files to see the basics, but I know that once I got everything working, I've just been copying/pasting a lot to extend the project instead of starting new pages from scratch.

I couldnt find any major differences in my jsp files.. just pulled in the style sheets, the base ext files, and my custom js files

Try taking your new sample html tutorial and putting in just the taglib prefix stuff, and keep adding until it breaks. Wish I had more for you but thats my best suggestion!

btlife
20 Dec 2010, 11:56 AM
I think I found the answer: http://osdir.com/ml/java.netbeans.j2ee/2005-05/msg00079.html

Looks like JSPX minimizes the <script> tag which causes it to fail. That's why the semi-colon was "fixing it"
Like the article stated I placed a semi-colon for the body of the script include.



<script type='text/javascript' src='/frap/resources/extjs/ext-all-debug.js'>;</script>


instead of



<script type='text/javascript' src='/frap/resources/extjs/ext-all-debug.js'></script>



Thanks again, hopefully this can help someone else out :)

btlife
20 Dec 2010, 12:01 PM
I think I found it, I posted a reply but it said a moderator had to approved it I am posting it again. System probably thought I was trying to hijack the forum with posting script commands, when I was trying to post the CODE.

Basically, I found this : http://osdir.com/ml/java.netbeans.j2ee/2005-05/msg00079.html
It says it breaks IE, but it seemed to apply to my situation as well.


Which says that JSPX minimizes tags, which causes the script tag to not process correctly. so it turns I added a semi-colon in the body of the script tag to make sure it doesn't get minimized. That's why it was working when I put a semi-colon in the next script tag.