PDA

View Full Version : ExtJS script tags cluttering index page



hermann.s
23 Oct 2013, 8:46 AM
Is there a proper way to solve this issue?

I'm only maybe 20% through with building an application, and all the scripts I've had to add to the index.htm make it look really messy.

I'm following the ExtJS MVC pattern, developing in VS2012.

scottmartin
25 Oct 2013, 3:46 AM
Can you explain what you are referring to?

your html should only have the following:



// code created by Sencha Cmd
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MyTheme</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>
<!-- </x-compile> -->
</head>
<body></body>
</html>


You do not need to include all the individual JS app files.

Scott

Tim Toady
25 Oct 2013, 10:40 AM
To add to what Scott said, Ext by default dynamically loads your files for you. It is important to specify dependencies when you define a class so that the loader knows what is needed and when. Sencha CMD can then take that and concatenate/minify them allowing for much faster transmission of your source to the client when you do a production build.

hermann.s
28 Oct 2013, 5:08 AM
Thank you both for your replies.
I had no idea about bootstrap.js.

How do I set dependencies? Would that be the "requires" property?

scottmartin
28 Oct 2013, 6:37 AM
Did you use Sencha Cmd to generate your app?

http://docs.sencha.com/extjs/4.2.2/#!/guide/command

I would recommend this if you are using MVC approach

From the console: (OS command line)



> sencha -sdk /path/to/extjs/ generate app MyApp /path/to/app
> sencha app build


This will generate and compile a working app

You can then see how things are setup.

Scott.

hermann.s
28 Oct 2013, 6:53 AM
Scott,

No, I didn't. It's all manual.