Extjs学习笔记 --- 初篇

Posted on 2007-12-25 21:11 久城 阅读(8492) 评论(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仅用于个人学习交流!
目的在于记录个人成长.
所有文字均属于个人理解.
如有错误,望多多指教!不胜感激!

Feedback

# re: Extjs学习笔记 --- 初篇  回复  更多评论   

2007-12-25 23:00 by 海边沫沫
兄弟,你是在分析它的源代码吧?
我觉得,从使用的角度来讲会更加不错。

# re: Extjs学习笔记 --- 初篇  回复  更多评论   

2007-12-25 23:00 by Lingo
广告广告:D

新版ext教程
www.family168.com上有一部分免费预览版。

# re: Extjs学习笔记 --- 初篇  回复  更多评论   

2007-12-26 08:42 by 久城
@海边沫沫
有理!~:)
这几天只是看了一下它的整体结构,我的JavaScript基础比较差,研究一下源码,可以转变一下用JavaScript编程的思想。

以往的web编程,一个页面会包含很多内容,如html,css,javascript,甚至是一些逻辑处理,而现在,他们的独立实现使耦合性更加明显了,以前还不是很适应css,js的分离,现在感觉,随着web得动态性,除了少数特殊的情况(如纯静态内容),html,css,javascript的分工也更加的明细。

所以尽量不要把表现,样式和事件写在一起,应该分开来写。

比如:
一个按钮的事件初始化:
Ext.get('mybutton').on('click', yourClickFunction);
一个按钮的样式初始化:
.mybutton {background-color:#FFFFFF;}
这样html标签单纯的用来显示,只需设置一个id:


PS:上边的XXX也应该是脱离于表现的,属于数据存储部分,可以存放在配置文件中。这样,分工明确了。

以上,愚见。进一步会从使用的角度来学习。

# re: Extjs学习笔记 --- 初篇  回复  更多评论   

2008-01-14 02:33 by 过河卒
很喜欢这样的研究思路,我也是沿这个思路看的。实用的话用到再说 呵呵

# re: Extjs学习笔记 --- 初篇  回复  更多评论   

2008-03-07 20:32 by owenf
同样刚开始看这个东西,不过确实没心情看乱成一堆的代码

只有注册用户登录后才能发表评论。


网站导航:
 

Copyright © 久城