Ext Core 3.0 Beta Released

4月4日,ExtJs团队发布了Ext Core 3.0 Beta版,它是即将发布的ExtJs 3.0的一个分支,基于MIT License版权。

一、Ext Core主要功能

Ext Core采用面向对象的方式设计,便于提高代码的简洁及复用。对以下各种操作提供了跨浏览器支持:
* DOM manipulation and traversal
* CSS management
* Event handling
* Dimensions and Sizing
* AJAX and JSON Support
* Animations
除此之外还包括其它一些常用功能:
* Classical Inheritance Class System
* Observable Class
* Markup generation and Templating
* Timed code execution
* URL encoding and decoding

继续阅读

Dojo 1.3 now available

经过了数月的开发,Dojo在愚人节前一天,1.3正式版。这个版本加入了许多新功能,亮点之一是对IE8和WebKit (Chrome, Safari)的兼容性和性能的处理。

下载地址:http://download.dojotoolkit.org/release-1.3.0/

Dojo 1.3的公共API:http://download.dojotoolkit.org/release-1.3.0/cheat.html

以下是一些新增的API的用法:
dojo.create, dojo.destroy, dojo.empty, dojo.place

// create a div.
var n = dojo.create("div");

// create a div with content and styles
var n = dojo.create("div", { innerHTML:"hi!", style:{ height:"200px" } });
// destroy the node safely
dojo.destroy(n);

// place an anchor somewhere, before the node with id="someNodeId"
var a = dojo.create("a", { href:"http://dojotoolkit.org" }, "someNodeId", "before");

// empty the contents of a node safely:
dojo.empty("someNodeId");
dojo.query(".nodes").empty();

// place a new LI in an UL at the first position
dojo.place("
  • Newly created DOM Node

“, “someUl”, “first”); // complex creation in dojo.query. passes through dojo.place dojo.query(“#myNode”).addContent(“hi there!”, “first”);

Alex’s开发了新的选择器引擎(selector engine):Acme,大大增强了本已经很快的dojo.query。John Resig的Sizzle选择器引擎也可做为构建(build-time)选项。

英文官方原文:http://www.dojotoolkit.org/2009/03/31/dojo-1-3-now-available

针对IE浏览器的内存泄露检测工具

今天在JE的论坛里看到有篇帖子讨论ExtJS的内存泄露问题,提到了一款内存泄露检测工具:sIEve,又在网上看到还有个类似的工具:Drip,具体如下。

1.sIEve-0.0.8.exe
官方主页:http://home.wanadoo.nl/jsrosman/
最新版本:http://home.wanadoo.nl/jsrosman/sIEve-0.0.8.exe
截图:

sIEve界面

sIEve界面

2.Drip-0.5.exe
官方主页:http://outofhanwell.com/ieleak/index.php?title=Main_Page
最新版本:http://www.outofhanwell.com/ieleak/Drip-0.5.exe
截图:

Drip界面
Drip界面

大概试用了下,首页在来回拖动时内存会增长,具体用法还有待研究,使用得当的话对提高性能有很大帮助。

Dojo 1.3 RC2 发布

Dojo 在3月23日发布了第二个RC版本,并希望这是最后一个 1.3 的RC版。该版本主要是修正了跟 IE 8 相关的一些问题。

该版本支持的浏览器包括:

  • Internet Explorer 6.0 through 8.0
  • Firefox 1.5 through 3.0 (Dijit supports only FireFox 2+)
  • Safari 3.1
  • Chrome 1.0
  • Opera 9.6 (Dojo Core only)
  • Konqueror 3.5+ (Dojo Core only)

下载地址:http://download.dojotoolkit.org/release-1.3.0rc2

BUG提交:http://bugs.dojotoolkit.org/

Dojo 1.3 的主要特点:

  • large behavioral and structural improvements to the Dijit widget set
  • new widgets and refactoring of Dijit infrastructure
  • IE 8 compatibility
  • up-porting several DojoX components into Core and Dijit
  • a distributed module system
  • Improvements to Tree and Grid widgets
  • Improvements to Form Validation

Dojo 1.3 will be fully backwards-compatible with all previous releases on the Dojo 1.x line.

表格排序和表头浮动效果(扩展SortTable)

前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了表头浮动效果及一些小功能。

Demo页:http://www.hopesoft.org/demo/sorttable/

一、SortTable说明
SortTable
version 2
7th April 2007
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/

Instructions:
Download this file
Add <script src=”sorttable.js”></script> to your HTML
Add class=”sortable” to any table you’d like to make sortable
Click on the headers to sort

Thanks to many, many people for contributions and suggestions.
Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
This basically means: do what you want with it.

用法:将要排序的表格添加CSS,如<table class=”sortable”>
默认对所有列都会添加排序功能,对于不需要排序的列可添加CSS:”sorttable_nosort”,如<td class=”sorttable_nosort”></td>

二、更新说明

Update:
version 2.1
9th Mar 2009
Hopesoft , http://www.hopesoft.org/blog/

说明:
1.增加中文排序
2.增加指定各行使用不同css样式功能(比如奇偶行背景色不一致)
用法:在要表头浮动的表格上添加属性,如<table class=”sortable” rowclass=”bg1,bg2,bg3″>
3.增加表头浮动功能(支持同一个页面有多个表格,比如不同Tab标签下的各个表格)
用法:在要表头浮动的表格上添加CSS,如<table class=”scrolltable”>
另外最好指定“表头”和“数据行”的各列的列宽,如
<tr><td class=’w1′>姓名</td><td class=’w2′>年龄</td></tr>
<tr><td class=’w1′>张三</td><td class=’w2′>21</td></tr>
以避免在FireFox下表头浮动时表头各列与数据各列不对齐
4.增加页面载入后自动排序
默认是对第一个要排序的表格的第一列做排序

新增的代码都用中文做了注释,屏蔽了原有代码中部分代码。

希望对大家能有帮助,在使用中如有问题可在此留言。

瑞士军刀-jQuery

早就久仰 jQuery的大名,不过一直没有尝试。不用的原因,可能是因为对Ajax框架已经有了一种排斥,感觉都是又大又笨的东西。

直到上周,公司有个小项目,用到了tab标签,在网上找到了jQuery的tab扩展,尝试了一下,感觉不错,就开始用jQuery来做这个项目。

经过一周左右的实践,熟悉了jQuery基本的用法。感觉就是瑞士军刀一样,体积小却功能强大,大大简化了对DOM的操作。我想我以后是离不开它了。如大家的评价一样:写的更少,做得更多。

这个小项目客户端用是jQuery+Js,服务器端用AjaxPro组件来返回数据,基本上WebForm又给废弃了。不知不觉中,目前做的项目中用了越来越多的客户端脚本,服务器端只是用来返回数据供客户端调用。感觉自己甚至有些偏执。也许前端才是我的最爱吧。

效果:

ExtJs做的后台效果

前段时间用ExtJs做的后台基本已完成,基本上是边做边摸索,参考了网友不少东西。

总的来说效果很cool,过程很痛苦。感觉ExtJs已经成为Js之上的一门新语言,目前还用不太习惯。学习曲线会比较长。

项目是用ExtJs+ASP.Net(c#)+SQL Server2000来处理,基本上没用webform,前台全部是ExtJs的控件来展现,数据由ExtJs请求服务器端,再把返回的JSON数据填充页面。

做的过程中也积累了一下经验,比如JSON数据的处理、Tree的生成、Fckeditor的扩展等等,相信后续使用过程中,会节省大量的时间。

ExtJs还是比较适合与MVC框架配合,这样才能发挥各自的长处。下次如果有机会尝试下ExtJs+ASP.Net的MVC框架。

附几张效果图如下:

ExtJS之路

原来就接触过ExtJS,界面做的是真不错。不过因感觉ExtJS过于“庞大”,一直没有上手练习。

前段时间开始做个后台管理系统,断断续续开始了我的ExtJS之旅。这段时间手头有个小项目,正好用ExtJS来练练手。毕竟在做项目中才能学到真东西。

项目采用ExtJS+ASP.Net (c#) + SQL Server 2000。

跌跌撞撞,入得门来。

主要学习途径:
1.官方文档带的例子(主要学习布局:layout)
2.官方论坛、JavaEye(学习提高ExtJS性能的方法)
3.网上的一些项目例子(学习大局观)

项目进度:20%(不过后续应该快些,今天打通了前台这一关: )

目前还处在初级水平,主要集中精力处理前台布局,后续会把重点放在后台(控制层)。

感觉ExtJS比较适合用做ASP.Net MVC中的View层,不过需要对JavaScript及ExtJS有相当的了解,增加了客户端脚本的工作量。国外有网友用Monorail结合ExtJS实现MVC,值得学习。不过这次可能没机会做了。后续可以考虑尝试一下。

利用Ajax.Net读写Cookie

Ajax.Net是Michael Schwarz写的一个.Net的AJAX框架,使用非常方便。在ASP.Net AJAX出现以前,一直是.Net平台开发AJAX应用的首选。

这两天在用Ajax.Net开发一个小的Ajax应用,其中要在Ajax Method中读写Cookie。利用Request.Cookies[“xxx”]遇到了问题。

后来经过Google,找到解决方案,需要使用HttpContext.Current来读写Cookie。

比如读取:
string CookieName=”demo”;
HttpCookie Cookie =  HttpContext.Current.Request.Cookies[CookieName];

写:
string CookieName=”demo”;
string Value=”ok”
HttpCookie Cookie = new HttpCookie(CookieName, Value);
HttpContext.Current.Response.Cookies.Add(Cookie);

参考链接:cookie info within ajax method