public
Created

django-extjs-tut.html

  • Download Gist
extjs-django-tut-tree.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
 
{% extends "base.html" %}
 
 
 
{% block title %}Ext Direct tree{% endblock %}
{% block head %}
 
{% load direct_providers %}
{% direct_providers %}
 
<script type='text/javascript' src='/static/direct_tree/direct_tree.js'></script>
{% endblock %}
 
{% block content %}
 
{% endblock %} Note
{% load direct_providers %}
{% direct_providers %} lines in header. They will automatically load providers (no need to use Ext.Direct.addProvider manually in your scripts!!!)
In direct_tree/static/direct_tree create direct_tree.js looking like
Ext.onReady(function(){
 
var tree = new Ext.tree.TreePanel({
width: 400,
height: 400,
autoScroll: true,
renderTo: document.body,
root: {
id: 'root',
text: 'Root'
},
loader: new Ext.tree.TreeLoader({
paramsAsHash: true,
directFn: Remote.MyRouter.getTree,
nodeParameter: 'id'
}),
fbar: [{
text: 'Reload root',
handler: function(){
tree.getRootNode().reload();
}
}]
});
});
templ2.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>
 
<head>
<!-- The following line defines content type and utf-8 as character set. -->
<!-- If you want your application to work flawlessly with various local -->
<!-- characters, just make ALL strings, on the page, json and database utf-8. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<!-- Ext relies on its default css so include it here. -->
<!-- This must come BEFORE javascript includes! -->
<link rel="stylesheet" type="text/css" href="/static/ext-3.3.1/resources/css/ext-all.css">
 
<!-- 3rd party css -->
 
<!-- Include here your own css files if you have them. -->
 
<!-- First of javascript includes must be an adapter... -->
<script type="text/javascript" src="/static/ext-3.3.1/adapter/ext/ext-base.js"></script>
 
<!-- ...then you need the Ext itself, either debug or production version. -->
<script type="text/javascript" src="/static/ext-3.3.1/ext-all-debug.js"></script>
 
 
<!-- Main js program -->
 
 
<!-- Set a title for the page (id is not necessary). -->
<title>{% block title %}My amazing site{% endblock %}</title>
 
<!-- You can have onReady function here or in your application file. -->
<!-- If you have it in your application file delete the whole -->
<!-- following script tag as we must have only one onReady. -->
<script type="text/javascript">
// Path to the blank image must point to a valid location on your server
Ext.BLANK_IMAGE_URL = '/static/ext-3.3.1/resources/images/default/s.gif';
</script>
 
{% block head %}{% endblock %}
 
</head>
 
<body>
{% block content %}{% endblock %}
</body>
 
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.