Totodo’s blog

ExtJS 设计模� 之一 （�例）
    Extjs å�‘展至今，传承了YUI的伟大精髓， YUI得到了Douglas Crockford（任è�ŒäºŽ Yahoo! 的一å�� JavaScript ä¼ é�“者和架构师，他是全ç�ƒæœ€æœ‰é€ è¯£çš„ JavaScript 语言专家之一，Blog：http://www.crockford.com/) 大师的赞å�Œ,而ExtJS也是将YUI的模å¼�脚本编程学习使用的淋漓尽致，并且还给它å�šäº†å‡ å¥—å�Žä¸½çš„CSSå«�è¡£….,   而在ExtJS越å�‘耀眼的å�Œæ—¶ï¼Œæˆ‘ç­‰åˆ�学者在使用ExtJs的时候也是晕呼其呼。（好在2.0 推出之å�Žï¼Œå®˜æ–¹çš„文档，åƒ�雨å�Žæ˜¥ç¬‹ä¸€æ ·ï¼Œå¼€å§‹è¦†ç›–到方方é�¢é�¢ã€‚）
    其实，拨开ExtJS�丽的外衣，翻阅其体内精致的代�，�难�现一些我们耳熟能详的设计模�。
    在早期1.0，1.1的好多例�中，我们会看到这样风格的代�。
var Oo= function(){
  var x;
  var y;
  return{
  a:function(){
  …
  },
  b:function(){
  …
  }
  }
}();
    咂一看，�是我们能�解的方�， function(){}(), 是何�？。
//()在这里，�味�方法已�执行，并且return里�的已�产生， 这样�能很难�解，那等�与执行 function oo(){}，这样是�好�解些了？
BTW :这里è¦�引入JavaScript的一个高级概念，“闭包â€�。(具体内容å�‚考《JavaScript The Definitve Guid,5th Eddion》Section 8.8 –Function Scope and Closures ,也是被Douglas Crockford推è��的为数ä¸�多的两本书ç±�之一。), 当然ä¸�急ç�€åŽ»ç¿»ï¼Œå…ˆæŠŠæˆ‘的废è¯�看完。
    好了，看这�使用别扭的使用方�， 而这�方�，在我们的页�，或者其他类中， 调用Oo的a方法的时候，形�如下
Ext.onReady(Oo.a);
对，正是这样的一�JS编程方�，被Douglas [...]

ExtJs 在Web UI已�获得很大的殊�，但�凭借它 Client UI 还无法霸�BS 那么丰富的应用。。他还�选择 一个Web层与��一起�交互完�一个完美的系统。
Extjs的天生丽质的, 完美了��JQuery,Prototype,YUI， 和她结�当然也需�出类拔�，生出�门。 如果采用Java为开�主语言，那么 ExtJS + DWR + SPRING 算是门当户对。
�惜Extjs 的DataStore 的 prxy 并没有DWR一席，因为DWR返回的是Java对象与JSON�常�, 然而DWR 的在于它与Web远程Java方法的直接会�，因此有��常�活的一�。所以，有时候使用DWR对于J2EE�说，�更好于JSON，他�了JSON��到事。
extjs官方论�里已�有人编写了这样的扩展，��人丰富，现在基本能满足�求了。
DWR扩展代�如下，创建 Ext.data.DWRProxy类。�样也继承Ext.data.DataProxy ，拿�show�解读一下。
dwr.js
Ext.data.DWRProxy = function(dwrCall, pagingAndSort){
Ext.data.DWRProxy.superclass.constructor.call(this);
this.dwrCall = dwrCall;
//this.args = args;
this.pagingAndSort = (pagingAndSort!=undefined ? pagingAndSort : true);
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function(params, reader, callback, scope, arg) {
if(this.fireEvent(”beforeload”, this, params) !== false) {
var sort;
if(params.sort && params.dir) [...]

�巧的身躯，强大�伤力，足以具备紫色装备的特点。

这款利器，专门为 使用 Ext， killer级的AjaxUI设计开�人员�备。

致命点. 体积�巧（3.5M），价格优惠（�费）

官方网站 ： http://www.spket.com/

1. Ext 对象的自动完�

 

2. Ext 组件对象的查看

3. JavaScript Lib 对象的自动识别

4. JS文档的智能分�，阅读

关于YUI-EXT �为 EXT的�题让人纷说已久，而�过了短短几日，EXT �紧锣密鼓的�行了Alpha 3。<从YUI-EXT0.40 到 EXT1.0Alpha2,Jack�YUI挑战 ，EXT lib支�JQuery,�以完全�以独立于YUI了。�过这次，Jack似乎�一次开始新一轮的自我挑战。1.0Alpha3版本开始增加了Prototype 和ScriptAculous,真是让人迫��待。
好，还是先看看 的例�。 这次�用帖代�了，官方出的指�已�很详细了。
教程：http://www.extjs.com/en/tutorial/introduction-ext
毕竟是个入门性的，�玩些花样还得看API （�惜JACK的API-DOC还没�得�更新到最新) 。
教程中：Grid实现
{

var myData = [

['Apple',29.89,0.24,0.81,'9/1 12:00am'],

['Ext',83.81,0.28,0.34,'9/12 12:00am'],

['Google',71.72,0.02,0.03,'10/1 12:00am'],

['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],

['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

];

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(myData),

reader: new Ext.data.ArrayReader({id: 0}, [

{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

])

});

ds.load();

var colModel = new Ext.grid.ColumnModel([

{header: "Company", width: 120, [...]

UI 1.0 alpha2 已��以抢先与预览了。
而令�业应用中 较为关注的Paging Grid 有了较大的改�。
在 0.33 中。已ç»�出现了Paging Grid , Jack 没把 Paging Grid 加入到他的Example中，而是在Blog里ç¨�微展示了一下，å�¯è§�其早有打算，，而一直没å�‘行的0.40也把JSON å’Œ XML å�ˆå¹¶äº†æˆ�了XHR…. 看æ�¥Jack早有打算。
先看下早期的 0.33 实现�。先拿一个我实现过的例�
示例如下：

var CutTarget = {
loadData : function(){
var schema = {root: ‘cutTargets’,
id: ‘nothing’,
fields: ['USER_NAME', 'ACCESS_NUMBER','PROD_SPEC','DESC','DEMO']};
var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
dataModel.getTotalRowCount = function(){
return 500; // or whatever your count is
}
dataModel.initPaging(’../cutTask.do?method=findCutObject’, 20);
dataModel.pageUrl =’../cutTask.do?method=findCutObject’;
dataModel.baseParams['cutTypeId'] = 1;
// the DefaultColumnModel expects this [...]