最近在看一些extjs和nodejs的东西,就试着将其结合着使用下。
1.新建express项目
首先我们新建一个express的项目,可以参照Web Development With Express。
1.
express -e extjs-demo
2.
cd extjs-demo
3.
sudo npm install
增加数据库支持
1.
sudo npm install mysql
连接数据库
01.
var
mysql = require(
'mysql'
);
02.
03.
var
connection = mysql.createConnection({
04.
host :
'localhost'
,
05.
port : 3306,
06.
database :
'blog'
,
07.
user :
'root'
,
08.
password :
'yourpassword'
09.
});
10.
11.
connection.connect();
12.
module.exports = connection;
01.
var
mysql = require(
'./db'
);
02.
03.
Article.get =
function
get(query, callback){
04.
var
sql =
'SELECT * FROM `articles`'
+ (query ? (
' WHERE '
+ query) :
''
)
05.
06.
mysql.query(sql,
function
(err, rows, fields) {
07.
if
(err){
08.
callback(err);
09.
}
10.
callback(err, rows);
11.
});
12.
};
这里只稍微提下,具体可参见extjs-demo。
2.引入ExtJS
我们可以从ExtJS官网下载开发包,我这只取了其中的几个文件: * resources/ ExtJS所有的css定义和主题都在里面 * ext-all.js extjs的核心组件 * ext-lang-zh_CN.js ExtJS的中文化部件(选用)
修改我们的主页,加载ExtJS
01.
<head>
02.
<link rel=
"stylesheet"
type=
"text/css"
href=
"/javascripts/extjs/resources/css/ext-all.css"
/>
03.
<script type=
"text/javascript"
src=
"/javascripts/extjs/ext-all.js"
></script>
04.
<script type=
"text/javascript"
src=
"/javascripts/extjs/ext-lang-zh_CN.js"
></script>
05.
<script>
06.
Ext.Loader.setConfig({
07.
enabled:
true
08.
});
09.
</script>
10.
<script type=
"text/javascript"
src=
"/javascripts/app.js"
> </script>
11.
</head>
01.
Ext.application({
02.
name:
"demo"
,
03.
appFolder:
"/javascripts/app"
,
04.
launch:
function
() {
05.
Ext.create(
'Ext.container.Viewport'
, {
06.
layout:
'fit'
,
07.
items: [{
08.
xtype:
'panel'
,
09.
title:
'Demo for Extjs'
,
10.
html:
'you can see demo here'
11.
}]
12.
});
13.
}
14.
});
这样启动之后就能看到extjs的界面了,当然加载的extjs可能有些多,如果有经验的同学可以指点下,还有哪些东西也可以将其去掉(刚接触,要是犯了比较白的错误,希望能指出,也好学习下,哈哈)。
3.ExtJS的MVC
参照ExtJS官方的说明,文件结构如下定义
1.
--app
2.
--controller
3.
--model
4.
--store
5.
--view
加入controller和view
01.
Ext.application({
02.
name:
"demo"
,
03.
appFolder:
"/javascripts/app"
,
04.
controllers: [
'Articles'
],
//This is somewhat different with the previous
05.
06.
launch:
function
() {
07.
Ext.create(
'Ext.container.Viewport'
, {
08.
layout:
'fit'
,
09.
items: [{
10.
xtype:
'panel'
,
11.
title:
'Demo for Extjs'
,
12.
items: [{
13.
xtype:
'articleseditor'
//This is somewhat different with the previous
14.
}]
15.
}]
16.
});
17.
}
18.
});
这里通过controllers: [‘Articles’]调用对应的controller
01.
Ext.define(
"Demo.controller.Articles"
, {
02.
extend:
'Ext.app.Controller'
,
03.
04.
views: [
'Articles'
],
//这里再取调用view
05.
06.
init:
function
() {
07.
this
.control({
08.
'articleseditor'
: {
09.
render:
this
.onEditorRender
10.
}
11.
});
12.
},
13.
14.
onEditorRender:
function
() {
15.
console.log(
"articles editor was rendered"
);
16.
}
17.
});
01.
Ext.define(
'Demo.view.Articles'
, {
02.
extend:
'Ext.grid.Panel'
,
03.
id:
"articles_editor"
,
04.
alias:
'widget.articleseditor'
,
05.
06.
initComponent:
function
() {
07.
//hardcoded store with static data:
08.
this
.store = {
09.
fields: [
'title'
,
'year'
],
10.
data: [{
11.
title:
'The Matrix'
,
12.
year:
'1999'
13.
}, {
14.
title:
'Star Wars: Return of the Jedi'
,
15.
year:
'1983'
16.
}]
17.
};
18.
this
.callParent(arguments);
19.
}
20.
});
这里先放点假数据呈现下,至此你打开界面的时候就能看到相应的数据显示在页面上
数据放在页面上肯定是不合理的,一般model中定义数据的结构,store存取数据记录
在controller中新增
1.
models: [
'Articles'
],
2.
stores: [
'Articles'
],
view中修改为
01.
Ext.define(
'Demo.view.Articles'
, {
02.
extend:
'Ext.grid.Panel'
,
03.
id:
"articles_editor"
,
04.
alias:
'widget.articleseditor'
,
05.
06.
store:
'Articles'
,
07.
initComponent:
function
() {
08.
this
.columns = [{
09.
header:
'作者'
,
10.
dataIndex:
'user'
,
11.
flex: 1
12.
}, {
13.
header:
'标题'
,
14.
dataIndex:
'title'
,
15.
flex: 1
16.
}, {
17.
header:
'内容'
,
18.
dataIndex:
'content'
,
19.
flex: 1
20.
}, {
21.
header:
'发生时间'
,
22.
dataIndex:
'happened_at'
,
23.
xtype :
'datecolumn'
,
24.
format :
'Y年m月d日'
,
25.
flex: 1
26.
}];
27.
this
.callParent(arguments);
28.
}
29.
});
model中定义数据类型
01.
Ext.define(
'Demo.model.Articles'
, {
02.
extend:
'Ext.data.Model'
,
03.
fields: [
04.
{
05.
name:
'id'
,
06.
type:
'string'
07.
}, {
08.
name:
'user'
,
09.
type:
'string'
10.
}, {
11.
name:
'title'
,
12.
type:
'string'
13.
}, {
14.
name:
'content'
,
15.
type:
'string'
16.
}, {
17.
name:
'happened_at'
,
18.
type:
'string'
19.
}]
20.
});
store中存取数据记录
01.
Ext.define(
'Demo.store.Articles'
, {
02.
extend:
'Ext.data.Store'
,
03.
model:
'Demo.model.Articles'
,
04.
05.
data: [{
06.
id:
'1'
,
07.
user:
'tom'
,
08.
title:
'The Matrix'
,
09.
content:
'hello Tom'
,
10.
happened_at:
'2013-6-1'
11.
}]
12.
});
当然至此为止我们还没进行数据交互的部分,那接下来我们就试试跟后台的交互
4.数据交互
在服务器段做下相应的json数据的准备
01.
var
Article = require(
'../models/article.js'
);
02.
03.
module.exports =
function
(app) {
04.
app.get(
'/articles'
,
function
(req, res) {
05.
Article.get(
null
,
function
(err, articles){
06.
if
(err){
07.
articles = [];
08.
}
09.
res.contentType(
'json'
);
10.
res.json({success:
true
, articles: articles});
11.
});
12.
});
13.
}
通过proxy从服务器端的”/articles”中获取json数据
这样就能在网页上显示数据库中的数据.
这里的代码可以参考https://github.com/caok/extjs-demo
参考:
http://docs.sencha.com/extjs/4.1.3/#!/guide/editable_grid
http://docs.sencha.com/extjs/4.1.3/#!/guide/editable_grid_pt2
作者: Caok
原文: http://caok1231.com/blog/2013/06/18/nodejs-and-extjs/