<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Extjs學(xué)習(xí)筆記 --- 初篇

    Posted on 2007-12-25 21:11 久城 閱讀(8648) 評論(5)  編輯  收藏 所屬分類: EXT&Extjs
    至此圣誕佳節(jié),漫寫學(xué)習(xí)筆記。

    無意中接觸到的Extjs,還去baidu查了查什么是Extjs,隨之,被它酷酷的外表迷惑了,即使很多人在議論著它幾百K的胖客戶端所帶來的性能問題,依舊不會影響我學(xué)習(xí)它的心情。

    對于Extjs的前景我沒資格談,也不想談,這個問題離我太遠。

    Extjs就是一個js庫,里面封裝了很多常用的UI組件,目前的版本是2.0。

    關(guān)于學(xué)習(xí)Extjs

    官方網(wǎng)站:http://www.extjs.com/
    這里當(dāng)然是最好的學(xué)習(xí)Extjs的地方,里面有關(guān)于Extjs的Demo和文檔。而且,它的論壇的口碑也不錯,推薦英語猛的人可以去逛逛。
    象我這種英語比較poor的人,學(xué)習(xí)起來就比較費勁了。

    推薦一個中文論壇:http://jstang.5d6d.com
    逛了兩天,感覺里面的一些資料很不錯,還居住著一些象frank這樣的牛人。

    去官網(wǎng)上下載一個ext2.0的包,這個包里面就是要學(xué)的全部內(nèi)容。
    包里的docs和examples兩個文件夾就是Extjs的文檔和Demo,和網(wǎng)站上看到的是一樣的。

    examples一般就是學(xué)習(xí)者的入口了,研究里面的幾個例子。

    主要應(yīng)用的幾個文件:
    ext-all.js,adapter\ext\ext-base.js和resources下的全部,這是別人的一個推薦,沒什么標(biāo)準(zhǔn),我感覺先排除一些文件,可以提高學(xué)習(xí)的效率。

    關(guān)于學(xué)習(xí)Extjs的環(huán)境

    myeclipse + spket插件 + firefox + firebug
    對于firefox + firebug前幾天提過了,spket插件今天是第一次用,spket也可以作為一個獨立的IDE平臺。它的功能還不清楚,使用它是因為下載的Ext包里的js文件都是密密麻麻的無格式化的代碼。而spket中的ctrl + shift + f 讓我有一種熟悉的感覺,這樣在eclipse中可以清晰的看到j(luò)s的結(jié)構(gòu)。

    學(xué)習(xí)內(nèi)容

    當(dāng)初就是因為一個panel的實現(xiàn),讓我接觸到的Extjs,這不是Extjs最引人的地方,卻是我學(xué)習(xí)的方向和入口。

    看了大多數(shù)的學(xué)習(xí)筆記,首先要接觸的就是
    Ext.onReady(function() {
        alert('hello world
    !');
    }
    );

    這個是在DOM加載完之后執(zhí)行的,也就是我們平時所常說的頁面加載完畢之后執(zhí)行的,當(dāng)然它應(yīng)該屬于頁面加載的一部分。
    onReady方法里的function可以看作一個匿名類對象。
    還有一些常用的語法:

    var myDiv = Ext.get('myDiv'); 
    // 返回id為myDiv的Element對象
    var ps = Ext.select('p');  
    // 返回id為p的Element對象數(shù)組,可以使用ps.each()進行遍歷。
    Ext.get('myButton').on('click', yourClickFunction); 
    // 給myButton元素添加事件,yourClickFunction是一個function對象.
    //
     more


    學(xué)習(xí)ext-base.js
    這個文件定義了Ext對象的基本結(jié)構(gòu)

    開始為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方法。(以下統(tǒng)一稱作方法)
    apply這個方法,實現(xiàn)了把D,B中的元素都添加給C,然后返回添加后的C。
    關(guān)于return,在網(wǎng)上學(xué)到的理解方式,就是return的部分屬于public的,而其余的部分屬于是private的,只在當(dāng)前function中可見。

    再后面Ext.apply(Ext, {.....});
    這個{}的里面有很多內(nèi)容,也就是利用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方法后面會經(jīng)常遇到。

    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的對象,以后慢慢學(xué)。

    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的基礎(chǔ)還是太差了。準(zhǔn)備一邊學(xué)習(xí)Extjs,一邊補習(xí)javascript。

    關(guān)于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

    一點積累,一點學(xué)習(xí),一點想說的。

    初學(xué),歡迎交流,歡迎指正。


    歡迎來訪!^.^!
    本BLOG僅用于個人學(xué)習(xí)交流!
    目的在于記錄個人成長.
    所有文字均屬于個人理解.
    如有錯誤,望多多指教!不勝感激!

    Feedback

    # re: Extjs學(xué)習(xí)筆記 --- 初篇  回復(fù)  更多評論   

    2007-12-25 23:00 by 海邊沫沫
    兄弟,你是在分析它的源代碼吧?
    我覺得,從使用的角度來講會更加不錯。

    # re: Extjs學(xué)習(xí)筆記 --- 初篇  回復(fù)  更多評論   

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

    新版ext教程
    www.family168.com上有一部分免費預(yù)覽版。

    # re: Extjs學(xué)習(xí)筆記 --- 初篇  回復(fù)  更多評論   

    2007-12-26 08:42 by 久城
    @海邊沫沫
    有理!~:)
    這幾天只是看了一下它的整體結(jié)構(gòu),我的JavaScript基礎(chǔ)比較差,研究一下源碼,可以轉(zhuǎn)變一下用JavaScript編程的思想。

    以往的web編程,一個頁面會包含很多內(nèi)容,如html,css,javascript,甚至是一些邏輯處理,而現(xiàn)在,他們的獨立實現(xiàn)使耦合性更加明顯了,以前還不是很適應(yīng)css,js的分離,現(xiàn)在感覺,隨著web得動態(tài)性,除了少數(shù)特殊的情況(如純靜態(tài)內(nèi)容),html,css,javascript的分工也更加的明細。

    所以盡量不要把表現(xiàn),樣式和事件寫在一起,應(yīng)該分開來寫。

    比如:
    一個按鈕的事件初始化:
    Ext.get('mybutton').on('click', yourClickFunction);
    一個按鈕的樣式初始化:
    .mybutton {background-color:#FFFFFF;}
    這樣html標(biāo)簽單純的用來顯示,只需設(shè)置一個id:


    PS:上邊的XXX也應(yīng)該是脫離于表現(xiàn)的,屬于數(shù)據(jù)存儲部分,可以存放在配置文件中。這樣,分工明確了。

    以上,愚見。進一步會從使用的角度來學(xué)習(xí)。

    # re: Extjs學(xué)習(xí)筆記 --- 初篇  回復(fù)  更多評論   

    2008-01-14 02:33 by 過河卒
    很喜歡這樣的研究思路,我也是沿這個思路看的。實用的話用到再說 呵呵

    # re: Extjs學(xué)習(xí)筆記 --- 初篇  回復(fù)  更多評論   

    2008-03-07 20:32 by owenf
    同樣剛開始看這個東西,不過確實沒心情看亂成一堆的代碼

    只有注冊用戶登錄后才能發(fā)表評論。


    網(wǎng)站導(dǎo)航:
     

    Copyright © 久城

    主站蜘蛛池模板: 91青青青国产在观免费影视| 亚洲乱色熟女一区二区三区丝袜| 97在线视频免费公开视频| 亚洲狠狠成人综合网| 久久综合日韩亚洲精品色| 国产免费小视频在线观看| 希望影院高清免费观看视频| 日韩电影免费在线观看网站| 亚洲AV无码专区在线厂| 亚洲成aⅴ人在线观看| 亚洲日本中文字幕| 亚洲精品狼友在线播放| 亚洲精品第一国产综合精品99| 成人午夜18免费看| 2020久久精品国产免费| 99久久免费看国产精品| 中文字幕免费在线看电影大全 | 亚洲性无码av在线| 日产亚洲一区二区三区| 亚洲午夜国产精品无码| 国产国拍亚洲精品福利| 俄罗斯极品美女毛片免费播放| 毛色毛片免费观看| 性做久久久久久久免费看| 最近中文字幕mv免费高清视频8| 永久免费A∨片在线观看| 中文字幕免费在线看线人动作大片 | 四虎影视免费永久在线观看| 麻豆精品国产免费观看| 免费人成视频在线| 免费黄色网址入口| 日本一道综合久久aⅴ免费| 女人18毛片免费观看| 日本特黄特黄刺激大片免费| 免费看大美女大黄大色| 成在线人永久免费视频播放| 国产成人免费永久播放视频平台| 永久免费无码网站在线观看| 日本免费人成黄页在线观看视频 | 99久久国产亚洲综合精品| 日本亚洲精品色婷婷在线影院|