Spring Roo, ExtJS

**btlife** · Dec 20th, 2010, 12:12 PM

Can anyone help with how to set this up correctly?

Hi All,

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

Code:

<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:

Code:

<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:

Code:

<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>

Code:

 

<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:

Code:

<?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" type="text/css" rel="stylesheet"/><script src="/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

**Brad Murray** · Dec 20th, 2010, 02:00 PM

There is a problem with the jsps being parsed into HTML by where something in the process drops the closing tag element and turns it into a self close if there is nothing between them.

eg.
<script src="blah.js"></script>
becomes
<script src="blah.js"/>

except the more compact version isn't valid HTML. (It is valid XHTML). So some browsers don't like it very much. It usually imports the first such script line fine, and breaks all the rest.

Roo generates its imports like this to workaround the issue.
<script src="blah.js"></script>.

The comment stops the end tag being self-closed.

Thread: Spring Roo, ExtJS

Thread Tools

Display

Spring Roo, ExtJS

Posting Permissions