把JS代码跟Ext框架运行在服务器端 _JavaScript

把JS代码和Ext框架运行在服务器端？

服务器端跑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()
   });
});

出来效果是这样儿的。

Jaxer Grid

服务器端的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 &raquo;</a>';
                   } else {
                       return val;
                   }
               }
           });
 
   tpl.overwrite('posts-main', vals);
}

这是效果页~

Jaxer Template

总结

我们可以看到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