请跟我来--Ext数据应用开发的几板斧
在上篇原型介绍中，有朋友就问了是否是组件，我想他可能的意思是能否在IDE的工具箱有可以拖拉使用的组件。暂时我也没有找到好的。Hafeyang 介绍了一个工具http://code.google.com/p/extsharp/ 可以省点脑力。据说Spket是个非常优秀的javascript开发工具，可以支持ext2.0,我没有用过，所以就没有发言权了，有兴趣可以自己研究。不过我还是建议大伙先弄明白最基本的原理，再使用工具，否则很容易变成大公司手中的木偶:-(
在C/S世界里，编写数据库应用通常分客户端和服务后台，中间通常使用WebService通讯，其根本实际上是一个XML数据包，有些公司为了提升性能，编写了原生的socket通讯程序来传送数据包，高级一点的自己做了负载均衡。这样性能有了，安全也有了，但是无法"Open"!世界就是这样的，没有什么东西十全十美！而在Ext的世界中，推荐大家使用JSON数据串来传递数据，比较开放，性能也说得过去(应该比XML省一半容量)，算是一个比较好得折中办法。
你可以下载showme项目来感受一下数据应用开发，下面简要说明要点如下：
1) 数据源设定
我们要从数据后台取得服务，就必须指明提供数据的url,如果让前端js直接操作后台数据库，一定造成很难维护的困难局面，做后台NBear,LINQ都不错的，学习起来也很容易。
function createDataStore(meta){
var DEFAULT_PAGE_SIZE=10;
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({url: 'facade.aspx'}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
id: 'id',
fields:meta}),
remoteSort: false,
baseParams: {start:0,limit:DEFAULT_PAGE_SIZE,s_method:'list'}
});
return ds;
}
在实际项目中绝对不允许一次查询返回全部数据的，必须分页查看。(任何好的框架总有愚蠢的用法，反过来还说是框架性能太差，真无言以对！)，所以数据包中要定义符合你查询条件的总记录数，还有数据结果集合，当然请求者已经知道是从何处开始查询，每页记录数目。
2) ajax发送数据包
以保存修改后的数据为例，新增和删除同理。
function saveData() {
for(var i=0;i<ds.getCount();i++){
var r=ds.getAt(i);
if(r['id']==''||r.dirty){
var dd=Ext.encode(r.data);
// Ext.log(dd);//可用于调试
Ext.Ajax.request({
url: 'facade.aspx',
params: { s_method: 'save',id:r.data['id'],data:dd },
failure: function(){Ext.Msg.alert("error");}
});
}
}
ds.reload();
}
3) 集成门面处理概要
为了说明原理，我直接在facade.aspx中用C#说明：
protected override void OnLoad(EventArgs e) {
Response.ContentEncoding = Encoding.UTF8;
String rt = "";// = service.Execute(Request.Params);
String method = Request.Params["s_method"];
bool ok = true;
if ("list".Equals(method)) {
String sql = "1=1";
String s1 = Request.Params["start"];
String s2 = Request.Params["limit"];
int start = 0;
int pagesize = 10;
if (s1 != null && s1.Length > 0)
start = int.Parse(s1);
if (s2 != null && s2.Length > 0)
pagesize = int.Parse(s2);
String q = Request.Params["query"];
if (q != null) {
// todo 修改sql，例如：
//sql = "Name like '%" + q + "%'";
}
//str = service.loadJsonRecords(sql, start, pagesize);
rt = "{\"totalCount\":\"50\",\"data\":[{\"Name\":\"alex\",\"Email\":\"lsj_3@21cn.com\",\"Mobile\":\"13922666727\",\"GradYear\":1995,\"sCreatedDate\":\"2008-01-02 21:06:28\",\"id\":\"1\"},{\"Name\":\"tom\",\"Mobile\":\"13922666739\",\"GradYear\":2009,\"id\":\"2\",\"sCreatedDate\":\"2008-01-02 21:06:28\"},{\"Name\":\"jerry\",\"Mobile\":\"13922666749\",\"GradYear\":2009,\"id\":\"3\",\"sCreatedDate\":\"2008-01-02 21:06:28\"}]}";
}
else if ("delete".Equals(method)) {
}
}
这里我直接输入了一串已经准备好的数据，读者可以用自己熟悉的框架改造为直接和数据库查询。下篇我介绍llano如何做到这一点。
有了数据包，当然就是把结果送回客户端，如果有回调要求，则生成的是客户端js的入口函数名和数据，这样就可以异步更新前端了。
bool scriptTag = false;
String cb = Request.Params["callback"];
if (cb != null) {
scriptTag = true;
Response.ContentType = "text/javascript";
}
else {
Response.ContentType = "application/x-json";
}
if (scriptTag)
rt = cb + "(" + rt + ")";
Response.Write(rt);
Response.End();
细心的读者一定会发现我们有多处重复进行了硬编码：
var colModel = new Ext.grid.ColumnModel([
{header: "姓名", width: 60, sortable: true, dataIndex: 'Name'},
{header: "邮件", width: 175, sortable: true, dataIndex: 'Email'},
{header: "手机", width: 125, sortable: true, dataIndex: 'Mobile'},
{header: "毕业年份", width: 65, sortable: true, renderer: myRenderer, dataIndex: 'GradYear'},
{header: "登记日期", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d'), dataIndex: 'sCreatedDate'}
]);
..
items: [
{fieldLabel:'姓名',name: 'Name',allowBlank: false,minLength:3,maxLength:8,anchor:'90%'},
{fieldLabel:'邮件',name: 'Email',vtype:'email',anchor:'90%'},
{fieldLabel:'手机',name: 'Mobile',anchor:'90%'},
{fieldLabel:'毕业年份',name: 'GradYear',xtype:'numberfield',anchor:'90%',value: '2008'},
{fieldLabel:'登记日期',name: 'sCreatedDate', xtype:'datefield',format: 'Y-m-d', anchor:'90%'}
]
那我们就在下一篇文章中看看如何重构，使得程序灵活一些，毕竟真正的项目通常一个表就30个左右的字段，我们大家可不想变成打字工人:-)
alex 1-3
在C/S世界里，编写数据库应用通常分客户端和服务后台，中间通常使用WebService通讯，其根本实际上是一个XML数据包，有些公司为了提升性能，编写了原生的socket通讯程序来传送数据包，高级一点的自己做了负载均衡。这样性能有了，安全也有了，但是无法"Open"!世界就是这样的，没有什么东西十全十美！而在Ext的世界中，推荐大家使用JSON数据串来传递数据，比较开放，性能也说得过去(应该比XML省一半容量)，算是一个比较好得折中办法。
你可以下载showme项目来感受一下数据应用开发，下面简要说明要点如下：
1) 数据源设定
我们要从数据后台取得服务，就必须指明提供数据的url,如果让前端js直接操作后台数据库，一定造成很难维护的困难局面，做后台NBear,LINQ都不错的，学习起来也很容易。
function createDataStore(meta){
var DEFAULT_PAGE_SIZE=10; var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({url: 'facade.aspx'}), reader: new Ext.data.JsonReader({ root: 'data', totalProperty: 'totalCount', id: 'id', fields:meta}), remoteSort: false, baseParams: {start:0,limit:DEFAULT_PAGE_SIZE,s_method:'list'} }); return ds;}在实际项目中绝对不允许一次查询返回全部数据的，必须分页查看。(任何好的框架总有愚蠢的用法，反过来还说是框架性能太差，真无言以对！)，所以数据包中要定义符合你查询条件的总记录数，还有数据结果集合，当然请求者已经知道是从何处开始查询，每页记录数目。
2) ajax发送数据包
以保存修改后的数据为例，新增和删除同理。
function saveData() { for(var i=0;i<ds.getCount();i++){ var r=ds.getAt(i); if(r['id']==''||r.dirty){ var dd=Ext.encode(r.data); // Ext.log(dd);//可用于调试 Ext.Ajax.request({ url: 'facade.aspx', params: { s_method: 'save',id:r.data['id'],data:dd }, failure: function(){Ext.Msg.alert("error");} }); } } ds.reload(); }3) 集成门面处理概要
为了说明原理，我直接在facade.aspx中用C#说明：
protected override void OnLoad(EventArgs e) { Response.ContentEncoding = Encoding.UTF8; String rt = "";// = service.Execute(Request.Params); String method = Request.Params["s_method"]; bool ok = true; if ("list".Equals(method)) { String sql = "1=1"; String s1 = Request.Params["start"]; String s2 = Request.Params["limit"]; int start = 0; int pagesize = 10; if (s1 != null && s1.Length > 0) start = int.Parse(s1); if (s2 != null && s2.Length > 0) pagesize = int.Parse(s2); String q = Request.Params["query"]; if (q != null) { // todo 修改sql，例如： //sql = "Name like '%" + q + "%'"; } //str = service.loadJsonRecords(sql, start, pagesize); rt = "{\"totalCount\":\"50\",\"data\":[{\"Name\":\"alex\",\"Email\":\"lsj_3@21cn.com\",\"Mobile\":\"13922666727\",\"GradYear\":1995,\"sCreatedDate\":\"2008-01-02 21:06:28\",\"id\":\"1\"},{\"Name\":\"tom\",\"Mobile\":\"13922666739\",\"GradYear\":2009,\"id\":\"2\",\"sCreatedDate\":\"2008-01-02 21:06:28\"},{\"Name\":\"jerry\",\"Mobile\":\"13922666749\",\"GradYear\":2009,\"id\":\"3\",\"sCreatedDate\":\"2008-01-02 21:06:28\"}]}"; } else if ("delete".Equals(method)) { }}有了数据包，当然就是把结果送回客户端，如果有回调要求，则生成的是客户端js的入口函数名和数据，这样就可以异步更新前端了。
bool scriptTag = false; String cb = Request.Params["callback"]; if (cb != null) { scriptTag = true; Response.ContentType = "text/javascript"; } else { Response.ContentType = "application/x-json"; } if (scriptTag) rt = cb + "(" + rt + ")"; Response.Write(rt); Response.End();细心的读者一定会发现我们有多处重复进行了硬编码：
var colModel = new Ext.grid.ColumnModel([ {header: "姓名", width: 60, sortable: true, dataIndex: 'Name'}, {header: "邮件", width: 175, sortable: true, dataIndex: 'Email'}, {header: "手机", width: 125, sortable: true, dataIndex: 'Mobile'}, {header: "毕业年份", width: 65, sortable: true, renderer: myRenderer, dataIndex: 'GradYear'}, {header: "登记日期", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d'), dataIndex: 'sCreatedDate'} ]);.. items: [ {fieldLabel:'姓名',name: 'Name',allowBlank: false,minLength:3,maxLength:8,anchor:'90%'}, {fieldLabel:'邮件',name: 'Email',vtype:'email',anchor:'90%'}, {fieldLabel:'手机',name: 'Mobile',anchor:'90%'}, {fieldLabel:'毕业年份',name: 'GradYear',xtype:'numberfield',anchor:'90%',value: '2008'}, {fieldLabel:'登记日期',name: 'sCreatedDate', xtype:'datefield',format: 'Y-m-d', anchor:'90%'} ]那我们就在下一篇文章中看看如何重构，使得程序灵活一些，毕竟真正的项目通常一个表就30个左右的字段，我们大家可不想变成打字工人:-)
alex 1-3
