Posted on 2007-12-25 21:11
久城 阅读(8640)
评论(5) 编辑 收藏 所属分类:
EXT&Extjs
至此圣诞佳节，漫写学习笔记。
无意中接触到的Extjs，还去baidu查了查什么是Extjs，随之，被它酷酷的外表迷惑了，即使很多人在议论着它几百K的胖客户端所带来的性能问题，依旧不会影响我学习它的心情。
对于Extjs的前景我没资格谈，也不想谈，这个问题离我太远。
Extjs就是一个js库，里面封装了很多常用的UI组件，目前的版本是2.0。
关于学习Extjs
官方网站：http://www.extjs.com/
这里当然是最好的学习Extjs的地方，里面有关于Extjs的Demo和文档。而且，它的论坛的口碑也不错，推荐英语猛的人可以去逛逛。
象我这种英语比较poor的人，学习起来就比较费劲了。
推荐一个中文论坛：http://jstang.5d6d.com
逛了两天，感觉里面的一些资料很不错，还居住着一些象frank这样的牛人。
去官网上下载一个ext2.0的包，这个包里面就是要学的全部内容。
包里的docs和examples两个文件夹就是Extjs的文档和Demo，和网站上看到的是一样的。
examples一般就是学习者的入口了，研究里面的几个例子。
主要应用的几个文件：
ext-all.js，adapter\ext\ext-base.js和resources下的全部，这是别人的一个推荐，没什么标准，我感觉先排除一些文件，可以提高学习的效率。
关于学习Extjs的环境
myeclipse + spket插件 + firefox + firebug
对于firefox + firebug前几天提过了，spket插件今天是第一次用，spket也可以作为一个独立的IDE平台。它的功能还不清楚，使用它是因为下载的Ext包里的js文件都是密密麻麻的无格式化的代码。而spket中的ctrl + shift + f 让我有一种熟悉的感觉，这样在eclipse中可以清晰的看到js的结构。
学习内容
当初就是因为一个panel的实现，让我接触到的Extjs，这不是Extjs最引人的地方，却是我学习的方向和入口。
看了大多数的学习笔记，首先要接触的就是
Ext.onReady(function() 
{
alert('hello world!');
});这个是在DOM加载完之后执行的，也就是我们平时所常说的页面加载完毕之后执行的，当然它应该属于页面加载的一部分。
onReady方法里的function可以看作一个匿名类对象。
还有一些常用的语法：
var myDiv = Ext.get('myDiv');
// 返回id为myDiv的Element对象
var ps = Ext.select('p');
// 返回id为p的Element对象数组,可以使用ps.each()进行遍历。
Ext.get('myButton').on('click', yourClickFunction);
// 给myButton元素添加事件，yourClickFunction是一个function对象.
// more
学习ext-base.js
这个文件定义了Ext对象的基本结构
开始为Ext = {version : "2.0"};
此时Ext对象只有一个元素version，值为2.0.
Ext.apply = function(C, D, B) {
if (B) {
Ext.apply(C, B)
}
if (C && D && typeof D == "object") {
for (var A in D) {
C[A] = D[A]
}
}
return C
};
如果用我的js的思想来说，这里定义了Ext的apply元素为一个function对象。如果用java的类的思想来说，这里定义了Ext类的apply方法。（以下统一称作方法）
apply这个方法，实现了把D,B中的元素都添加给C，然后返回添加后的C。
关于return，在网上学到的理解方式，就是return的部分属于public的，而其余的部分属于是private的，只在当前function中可见。
再后面Ext.apply(Ext, {.....});
这个{}的里面有很多内容，也就是利用Ext.apply给Ext对象添加了很多属性和方法。
属性如：isStrict : isStrictis，Secure : isSecure
方法如：
extend : function() {
var io = function(o) {
for (var m in o) {
this[m] = o[m]
}
};
return function(sb, sp, overrides) {
if (typeof sp == "object") {
overrides = sp;
sp = sb;
sb = function() {
sp.apply(this, arguments)
}
}
var F = function() {
}, sbp, spp = sp.prototype;
F.prototype = spp;
sbp = sb.prototype = new F();
sbp.constructor = sb;
sb.superclass = spp;
if (spp.constructor == Object.prototype.constructor) {
spp.constructor = sp
}
sb.override = function(o) {
Ext.override(sb, o)
};
sbp.override = io;
Ext.override(sb, overrides);
return sb
}
}(),
这个extend方法后面会经常遇到。
Ext.ns("Ext", "Ext.util", "Ext.grid", "Ext.dd", "Ext.tree", "Ext.data",
"Ext.form", "Ext.menu", "Ext.state", "Ext.lib", "Ext.layout",
"Ext.app", "Ext.ux");
这里定义了Ext的命名空间，涵盖了Ext的几大牛B的对象，以后慢慢学。
Ext.apply(Function.prototype, {
createCallback : function() {
},
createDelegate : function(C, B, A) {
},
defer : function(C, E, B, A) {
},
createSequence : function(B, A) {
},
createInterceptor : function(B, A) {
}
});
这里为function的原型对象添加了五个方法。每一个function都有它的原型对象prototype，这样定义之后，对于以后任何的function对象，都具有如上定义的五个方法。
如此分析ext-base.js的类，读代码时，才感觉到自己的javascript的基础还是太差了。准备一边学习Extjs，一边补习javascript。
关于javascript知识点
this的用法
参考：
http://www.cnblogs.com/raymond19840709/archive/2007/10/30/942520.html
var的用法
参考：
http://www.cnblogs.com/birdshome/archive/2005/01/26/97885.html
一点积累，一点学习，一点想说的。
初学，欢迎交流，欢迎指正。
欢迎来访！^.^!
本BLOG仅用于个人学习交流!
目的在于记录个人成长.
所有文字均属于个人理解.
如有错误，望多多指教！不胜感激！