PDA

View Full Version : Setting root URLs for loading custom ExtJs components?



stodge
28 Oct 2012, 4:57 PM
I'm trying to implement ExtJS into my Django project. So far my directory structure for the project is:



mydjangoproject
static
js (core project js files)
css (core project css files)
extern
extjs (extjs extracted from archive)
testapp
static
js (testapp specific js files)
testapp
map
MapPanel.js
css (testapp specific css files)


So the URL for MapPanel.js /static/testapp/js/

I have numerous Django applications in this project and I don't want to change the layout. My Django template is:


<html>
<head>
<title>Test Page</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/static/extern/extjs/ext-debug.js"></script>
<script type="text/javascript" src="/static/js/app.js"></script>
</head>
<body></body>
</html>

The template is located in mydjangoproject/testapp/templates/testapp/map.html.

app.js contains:


Ext.require([
'Ext.container.Viewport',
'testapp.map.MapPanel'
]);

But I get a 404 error for extjs-all.css and testapp/map/MapPanel.js. How would I tell ExtJS the root URLs for the CSS file and my MapPanel.js? Thanks

evant
28 Oct 2012, 5:08 PM
For the css, you just need to provide the correct path since you're embedding it directly.

For the classes, you can point it to a custom namespace, grep the example for:



Ext.Loader.setPath('Ext.ux', '../ux/');


As an example.

stodge
28 Oct 2012, 5:11 PM
I read that in the documentation, but the resulting URLs are wrong. The page's URL is:


http://localhost:8000/testapp/test-map/

But I get:


http://localhost:8000/testapp/test-map/testapp/map/MapPanel.js

When I need:


http://localhost:8000/static/js/testapp/testapp/map/MapPanel.js

Thanks

vietits
28 Oct 2012, 5:12 PM
But I get a 404 error for extjs-all.css and testapp/map/MapPanel.js. How would I tell ExtJS the root URLs for the CSS file and my MapPanel.js?

1. For the ext-all.css: You should use LINK tag in the header of HTML document:


<link rel="stylesheet" type="text/css" href="points to ext-all.css" />

2. Use Ext.Loader.setConfig() to set path for your namespaces.


Ext.Loader.setConfig({
enabled: true, // enable dynamic loading
paths: {
'testapp': '/testapp/static/js/testapp',
...
}
})

stodge
28 Oct 2012, 5:13 PM
Oh sorry, ignore the comment about the CSS file. I had a LINK element but I forgot to correct the URL.

stodge
28 Oct 2012, 5:24 PM
1. For the ext-all.css: You should use LINK tag in the header of HTML document:


<link rel="stylesheet" type="text/css" href="points to ext-all.css" />

2. Use Ext.Loader.setConfig() to set path for your namespaces.


Ext.Loader.setConfig({
enabled: true, // enable dynamic loading
paths: {
'testapp': '/testapp/static/js/testapp',
...
}
})


Thanks - it didn't occur to me that "paths" could be absolute URLs.