很强大，
是一个出色的前端。下面通过一个小例子来演示下使用。
centos环境，python2.7.6 django1.5.1 ext-4.2.1
一、创建项目
1、创建一个项目
django-admin.py startproject django_extjs
2、创建两个新目录
cd
django_extjs #进入第1层目录
cd django_extjs #进入第2层目录
mkdir static #不同应用公用文件 ，如extjs,css javascript等
mkdir templates #公用模版
3、解开ext-4.2.1,复制extjs-4.2.1文件件到 /django_extjs/django_extjs/static下面
文件件 并修改名字为extjs
如： /django_extjs/django_extjs/static/extjs
4、修改settings.py (./django_extjs/django_extjs/settings.py )
1) 上面添加
-
import os
-
_ROOT_PATH = os.path.dirname(__file__)
2）修改database
-
DATABASES = {
-
'default': {
-
'ENGINE': 'django.db.backends.sqlite3',
-
'NAME': os.path.join(_ROOT_PATH, 'django_extjs_tut.sqlite3'),
-
'USER': '',
-
'PASSWORD': '',
-
'HOST': '',
-
'PORT': '',
-
}
-
}
3、修改 STATICFILES_DIRS
-
STATICFILES_DIRS = (
-
os.path.join(_ROOT_PATH, 'static'),
-
)
4、修改TEMPLATE_DIRS
-
TEMPLATE_DIRS = (
-
os.path.join(_ROOT_PATH, 'templates'),
-
)
5、测试配置
python manage.py syncdb
6、创建公用模版 base.html（./django_extjs/django_extjs/templates/base.html）
-
-
<html>
-
<head>
-
-
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
-
-
-
<link rel="stylesheet" type="text/css" href="/static/extjs/resources/css/ext-all.css">
-
-
-
-
-
-
-
<script type="text/javascript" src="/static/extjs/adapter/ext/ext-base.js"></script>
-
-
-
<script type="text/javascript" src="/static/extjs/ext-all-debug.js"></script>
-
-
-
-
-
-
-
<title>{% block title %}My amazing site{% endblock %}</title>
-
-
-
-
-
<script type="text/javascript">
-
// Path to the blank image must point to a valid location on your server
-
Ext.BLANK_IMAGE_URL = '/static/extjs/resources/images/default/s.gif';
-
</script>
-
-
{% block head %}{% endblock %}
-
-
</head>
-
-
<body>
-
{% block content %}{% endblock %}
-
</body>
-
-
</html>
-
~
二、在项目下建立一个应用
1、建立hello_extjs
cd django_extjs #进入第1层目录
python manage.py startapp hello_extjs
2、修改配置 settings.py
在 INSTALLED_APPS 增加 hello_extjs
-
INSTALLED_APPS = (
-
'django.contrib.auth',
-
'django.contrib.contenttypes',
-
'django.contrib.sessions',
-
'django.contrib.sites',
-
'django.contrib.messages',
-
'django.contrib.staticfiles',
-
'hello_extjs',
-
-
)
3、同步配置
python manage.py syncdb
4、在hello_extjs 下创建目录
cd hello_extjs
mkdir templates
mkdir templates/hello_extjs
mkdir static
mkdir static/hello_extjs
5、添加路由
django_extjs/urls.py
-
urlpatterns = patterns('',
-
(r'^hello_extjs/', include('hello_extjs.urls')),
-
)
创建hello_extjs/urls.py
-
from django.conf.urls import patterns, include, url
-
-
urlpatterns = patterns('hello_extjs.views',
-
(r'^$', 'index'),
-
)
6、创建模版文件
./hello_extjs/templates/hello_extjs/index.html
-
{% extends "base.html" %}
-
{% block title %}Hello中国 ExtJs{% endblock %}
-
{% block head %}
-
<script type='text/javascript' src='/static/hello_extjs/hello_extjs.js'></script>
-
{% endblock %}
-
{% block content %}
-
<p>Click aa on me</p>
-
{% endblock %}
7、创建js脚本文件 hello_extjs.js
-
Ext.onReady(function() {
-
var paragraphClicked = function(e) {
-
var paragraph = Ext.get(e.target);
-
paragraph.highlight();
-
-
Ext.MessageBox.show({
-
title: 'Paragraph Clicked',
-
msg: paragraph.dom.innerHTML,
-
width:400,
-
buttons: Ext.MessageBox.OK,
-
animEl: paragraph
-
});
-
}
-
Ext.select('p').on('click', paragraphClicked);
-
});
8、增加视图函数
vi hello_extjs/views.py
点击(此处)折叠或打开
-
from django.shortcuts import render_to_response
-
-
def index(request):
-
return render_to_response('hello_extjs/index.html')
三、运行
python manage.py runserver 192.168.1.109:8910
浏览器 .
参考文章
阅读(768) | 评论(0) | 转发(0) |
