PDA

View Full Version : ExtJS 4.1 MVC Hello World Not running in Dynamic Web Project in Eclipse


bomslang
5 Sep 2012, 4:31 AM
Folks,

I was trying out sample ExtJS 4.1 app inside dynamic web project in Eclipse.
Here's my directory structure :-

web - Folder where all web resources will reside

38483

Here's my index.html :-



<html>
<head>
<title>ExtJS Examples</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/ext.js"/>
<script type="text/javascript" src="extjs/ext-all-debug.js"/>
<script src="app.js"></script>

</head>
<body>
</body>
</html>


and here's my app.js



Ext.Loader.setPath({
'Ext':'extjs/src'
});


Ext.application({
name: 'DemoApp,

requires: ['Ext.window.MessageBox'],
appFolder: 'app',
launch: function() {
Ext.Msg.alert('Done');
}
});

While I try to run this application on server tomcat, nothing appears on the browser window as well as console logs.

What I am missing ?
TBakker
5 Sep 2012, 5:06 AM
You only need one reference to the extjs file:

<script type="text/javascript" src="extjs/ext-all.js"/>

This is not your solution tho ;)
I think you don't need to specify the 'Ext' path:


Ext.Loader.setPath({'Ext':'extjs/src'});
bomslang
5 Sep 2012, 5:18 AM
I tried removing both, but it doesn't work. Nothing appears on browser window as well as screen.



<script type="text/javascript" src="extjs/ext-all.js"/>


and



Ext.Loader.setPath({ 'Ext':'extjs/src'});


What am I doing wrong ?
TBakker
5 Sep 2012, 5:26 AM
Ext.application({
autoCreateViewport: true
});


You are missing a Viewport. You need to create one in "app/view/Viewport.js". Please refer to an simple example: http://try.sencha.com/extjs/4.1.0/community/extjs4-mvc-grid-binded-form/ and press "Edit Example".
More MVC examples: http://try.sencha.com/tags/mvc .

Hope this helps!
mitchellsimoens
5 Sep 2012, 5:42 AM
Try with ext-all-dev.js as dev has all the logs Ext JS will spit out. Also, ext-all.js does not have Ext.Loader enabled by default like debug and dev files do.
bomslang
5 Sep 2012, 5:58 AM
@TBakker and @Mitch -
I did include ext-all-dev.js.

I tried what you said, but no o/p.
app.js


Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'DemoApp',
appFolder: 'app',
autoCreateViewport: true,
launch: function() {
Ext.Msg.alert('title');
}
});


and index.html


<html>
<head>
<title>ExtJS Examples</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<!--<script type="text/javascript" src="extjs/ext.js"/> -->
<script type="text/javascript" src="extjs/ext-all-dev.js"/>
<script type="text/javascript" src="app.js"/>

</head>
<body>
</body>
</html>
TBakker
5 Sep 2012, 6:11 AM
When I try to execute your code it just works fine for me. Which browser are you using (this should not matter but just for testing :) ).

Try this:


Ext.application({
name: 'MyApp',
launch: function() {
Ext.Msg.alert('Hello World');
}});

This is my html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
bomslang
5 Sep 2012, 6:39 AM
@Tbakker -

That code structure is working fine for me too - but only in normal Eclipse Project.

But ( as you can see the #1 post image dir structure ) when I try to run it in Dynamic Web Project in Eclipse inside the "web" folder, it doesn't run.

Can you please check by making a folder structure like mine using Dynamic Web Project in Eclipse ?

38486
TBakker
6 Sep 2012, 1:45 AM
I think this is more of a Eclipse question than a Ext JS question because the code is fine :)

I have one more solution for you to try,
Dont write: <script type="text/javascript" src="app.js"/>
Write: <script type="text/javascript" src="app.js"></script>

https://www.ibm.com/developerworks/mydeveloperworks/blogs/loiane/entry/getting_started_with_extjs_in_your_j2ee_project6?lang=en
bomslang
6 Sep 2012, 3:59 AM
Thanks for your reply.

Btw, I already saw that link before. But that didn't help me out.

Could you run a ExtJS 4.1 Hello World project in Dynamic web project in eclipse by making the same directory structure as I have shown in the image ?

Thanks
loiane
6 Sep 2012, 11:41 AM
Please take a look at this project structure. It is an Eclipse Web Dynamic project with ExtJS MVC. The only difference is that my app.js file is inside the app folder - you do not need to change yours.

https://github.com/loiane/ext4-crud-mvc