PDA

View Full Version : Integrating ExtJS 3.3.1 with DWR !...



agustincba
1 Sep 2011, 8:45 AM
Hi to all !. Just wanted to leave my problem... I tried to install DWR following this instructions from this site...
http://directwebremoting.org/dwr/index.html

b (http://directwebremoting.org/dwr/index.html) and all worked ok !... But when I add ExtJS libraries in the same directory as the XHTML file... I don't get it working nor visualiza nothing...

How can I solve this ?... Thankx

jshailes
8 Sep 2011, 1:56 AM
Post your source code on here, DWR and ExtJs definitely work together just fine. If you're new to ExtJs with DWR then have a search for DwrProxy it works wonders :)

agustincba
8 Sep 2011, 6:52 PM
Hey jshailes... Thankx for answering !. Actually DWR works as when I try to access the test page all works fine, but when I try to make my ExtJS project it seems that I put the ExtJS files in the incorrect directory !... My problem is only that !... Would you help me telling me where to put them ?. Thankx !. But where to put them considering the index.html file !.. thankx

jshailes
8 Sep 2011, 10:38 PM
There are actually no strict rules and regulations where the javascript libraries are stored relative to the html files. An example layout would be:

/index.html
/pages/myPage.html
/images/myImage.png
/css/myCss.css
/javascript/myJavascriptFile.js
/javascript/lib/ext-3.3.1/ext-all.js
/javascript/lib/ext-3.3.1/adapter/ext/ext-base.js
/javascript/lib/ext-3.3.1/resources/css/ext-all.css

which would result in an index.htm



<html>
<head>
<link rel="stylesheet" type="text/css" href="css/myCss.css" />
<link rel="stylesheet" type="text/css" href="javascript/lib/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="javascript/myJavascriptFile.js"></script>
<script type="text/javascript" src="javascript/lib/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="javascript/lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
</head>
<body>
<img src="images/myImage.png"/>
</body>
</html>


Notice how all of the references to the files start with the folder name relative to where the index file is. Now compare this with what it looks like for myPage.html:



<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/myCss.css" />
<link rel="stylesheet" type="text/css" href="../javascript/lib/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../javascript/myJavascriptFile.js"></script>
<script type="text/javascript" src="../javascript/lib/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="../javascript/lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
</head>
<body>
<img src="../images/myImage.png"/>
</body>
</html>


Notice the '../' before each of the files signifying to move to the previous directory.

Say you has another html file in a folder inside the pages folder, e.g. /pages/category/myCategoryPage.html then the layout would be:



<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/myCss.css" />
<link rel="stylesheet" type="text/css" href="../../javascript/lib/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../../javascript/myJavascriptFile.js"></script>
<script type="text/javascript" src="../../javascript/lib/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="../../javascript/lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
</head>
<body>
<img src="../../images/myImage.png"/>
</body>
</html>


I'm not sure if the following would work, but it might do:



<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/myCss.css" />
<link rel="stylesheet" type="text/css" href="/javascript/lib/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/javascript/myJavascriptFile.js"></script>
<script type="text/javascript" src="/javascript/lib/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="/javascript/lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
</head>
<body>
<img src="../../images/myImage.png"/>
</body>
</html>


where the '/' before each file takes you to the root of the website directory and therefore the filename stops becoming relative to where the html file is located. Like I say I can only say it might work because I've never had to use it in the past but it makes logical sense to me that it would.

agustincba
9 Sep 2011, 5:40 AM
Dude... Thankx again for answering me !. I thought it was necesary to you that I post this details, so here I am !... The html code and an Image of the project directory !.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>

<script type='text/javascript' src='/resources/ext-base.js'></script>
<script type='text/javascript' src='/resources/ext-all-debug.js'></script>
<script type='text/javascript' src='/resources/ext-lang-es.js'></script>

<script type='text/javascript' src='/WebDWR/dwr/engine.js'></script>
<script type='text/javascript' src='/WebDWR/dwr/util.js'></script>
<script type='text/javascript' src='/WebDWR/dwr/interface/Lista.js'></script>
<script type="text/javascript">

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
new Ext.Button({
renderTo: document.body,
text: 'Ver',
handler: function(f)
{
init();
}
});

function init()
{
Lista.obtenerNombre(2,
{
callback:function(str)
{
alert(str);
}
});
}

});


</script>
</h:head>
<h:body>
</h:body>
</html>
Taking this into account and seeing the pic from the DWR Project in netbeans and also having a pic from the test page, can you tell me why they aren't, let say, detected ?. While if I use pure javascript, they are... Causa if you see the directory, you won't find something like "/WebDWR/dwr/"... I think this details were necessary... I apologize for not posting them before... Cheers

jshailes
9 Sep 2011, 7:51 AM
Can you see in firebug whether it's found the extjs source files?

I think it might be that it has found them successfully but you need to include more of the ext js lib. I include all the files.. it has additional scripts, images/icons, css etc.

agustincba
9 Sep 2011, 8:31 AM
How can I do that ?. With those files I was able to program using PHP !... Why are you saying that I need some aditional ExtJS files ?. Like what files ?.