btbytes/extjs-django-tut-tree.html

## extjs-django-tut-tree.html

{% 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
<!-- 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>

	{% 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();
	}
	}]
	});
	});
	<!-- 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>