服务器端跑javascript ?还记得asp的这个<script language=javascript runat=server>吗~
哈哈现在出来一种新的武器。。那就是JAVA编辑器厂商 Aptana 释放出来的Jaxer, 一个新的服务端运行的平台。
下面用Ext在服务器端运行一下,体验一下你熟悉的js的强大功能吧。
Jaxer促进了服务器端和客户端的紧密结合,你可以包含服务器端的js,也可以包含客户端的js,也可以2者都包含。服务器充当一个中间代理,使得可以良好的处理同步和异步的通信。Jaxer现在提供了一个文本的数据库甚至是socket,这使它看上去更像是真证的服务器端运行平台。你可以及时关注他的官网 Aptana Jaxer,及时了解最近的服务器端运行JavaScript的技术。
利用Jaxer存储数据并用Ext Grid显示出来
点这里下载全部示例源代码如果你想自己安装个Jaxer平台进行测试,第一个示例展示了一个非常简单的Ext.data.Store以及Jaxer server存储的代码。
JaxerStoreServer.js 包含了简单的服务器端的函数,用来创建和执行一个查询。前提是建立在你已经配置好了Jaxer的config.js指向一个数据库。
function ExtJaxerProxy(params) {
var fld = [], q = [];
var fields = params.fields;
for (var i = 0; i < fields.length; i++) {
if (typeof fields[i] == 'string') {
fld.push(fields[i]);
q.push('?');
} else if (typeof fields[i] == 'object') {
fld.push(fields[i].name);
q.push('?');
}
}
var qp = fld;
var query = 'SELECT ' + fld.join(',') + ' FROM ' + params.table;
if (params.sortInfo) {
query += ' ORDER BY ' + params.sortInfo.sort + ' '
+ params.sortInfo.dir;
qp.push(params.sortInfo.sort);
qp.push(params.sortInfo.dir);
}
if (params.start && params.limit) {
query += ' START ' + params.start + ' LIMIT ' + params.limit;
qp.push(params.start);
qp.push(params.limit);
}
return Jaxer.DB.execute(query);
}
JaxerStore.js 包含了简单的Ext data链接到Jaxer,并存储数据。
Ext.data.JaxerStore = function(config) {
var params = Ext.apply({
fields : config.fields,
table : config.table
}, config.baseParams || {});
Ext.data.JaxerStore.superclass.constructor.call(this,
Ext.applyIf(config, {
reader : new Ext.data.JsonReader(Ext.apply({
root : 'rows'
}, config.readerConfig), config.fields)
}));
ExtJaxerProxyAsync(this.loadData.createDelegate(this), params);
};
Ext.extend(Ext.data.JaxerStore, Ext.data.Store);
确保这两个文件都包含在你的网页里,Ext.JaxerStore运行在客户端,JaxerStoreServer以一个'server-proxy’运行。这里我们创建一个Jaxer存储,然后创建一个简单的Ext GridPanel并把JaxerStore数据给它。
Ext.onReady(function() {
var store = new Ext.data.JaxerStore({
table : 'demo',
fields : [
{name : 'name'},
{name : 'phone'},
{name : 'email'}
],
readerConfig : {
sortInfo : {
sort : 'name',
dir : 'asc'
}
}
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store : store,
columns : [
{header : "Name", sortable : true, dataIndex : 'name'},
{header : "Phone #", sortable : true, dataIndex : 'phone'},
{header : "Email", sortable : true, dataIndex : 'email'}
],
viewConfig : {
forceFit : true
},
stripeRows : true,
height : 350,
width : 680,
title : 'Jaxer Demo Grid',
renderTo : Ext.getBody()
});
});
出来效果是这样儿的。
服务器端的EXT模板XTemplate
这个示例展示一下真实运行在服务器端的Ext代码,并展示了Ext模板的优势。为了运行这个示例,我把JS ext-base和ext-all包含方式改为了runat=”both” ,这样Ext代码就可以运行在服务器端和客户端了。Html文件包含了一个空的div,叫posts-main’ 还包含了一个表格用来支持window.onserverload = loadPosts()。loadPosts函数简单的执行查询数据,并通过Ext.XTemplate显示出来。然后XTemplate把数据给循环出来。
function loadPosts() {
var vals = Jaxer.DB.execute('select id, title, body, perm from posts');
var tpl = new Ext.XTemplate('<tpl for="rows">',
'<div id="post-{id}" class="post">',
'<h2><a href="/jxtest/post/{perm}">{title}</a></h2>',
'<p class="post-body">{body:this.formatBody}</p>', '</div>',
'</tpl>', {
formatBody : function(val, all) {
if (val.length > 300) {
return Ext.util.Format.ellipsis(val, 300)
+ '<a href="/jxtest/post/' + all.perm
+ '">Read More »</a>';
} else {
return val;
}
}
});
tpl.overwrite('posts-main', vals);
}
这是效果页~
总结
我们可以看到Jaxer可以使开发者减轻了劳动,轻松的部署客户端的代码到服务器端。这些示例也展示了Ext框架在服务器端的潜在应用。
下载本页提及的全部示例源代码。
作者:Rich Waters
原文链接:http://extjs.com/blog/2008/06/10/extjs-and-jaxer/
翻译:Bagheera JH Ding
翻译者Email:wealding@gmail.com
译文原地址:http://hi.baidu.com/ding__/blog/item/b82a91183ad06eb14aedbc87.html