最近在看一些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/
6592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
