小菜毛毛技術分享

          與大家共同成長

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks

          Tutorial:Playing With Ext The Easy Way (Chinese)

          From Learn About the Ext JavaScript Library

          Jump to: navigation, search


          Summary: Playing With Ext The Easy Way (Chinese)
          Author: Patrick Donelan (翻譯:Cloudream)
          Published: 2007-10-12
          Ext Version: 2.0
          Languages: en.png English de.png Deutsch cn.png Chinese kr.png Korean jp.png Japanese es.png Spanish tr.png Turkish

          Contents

          [hide]

          蹣跚學步

          第一步 - 入門

          想必您已經聽說過 Ext、瀏覽了在線演示,并且嘗試閱讀API文檔。不過,面對復雜的API文檔,您卻不知如何下手?!

          第二步 - 起步

          通覽過API文檔,并且找到了所要立刻嘗試的功能,面對混雜的網頁源代碼,如何開始一個簡單的測試頁面?那么……

          不論您的目標是什么,您都可以依照本文快速的開始使用Ext。不,不用搭建服務器,您所需要的僅僅是Firefox瀏覽器和Firebug調試插件。如果還沒有安裝,那么現在就是一個好機會。


          牛刀小試

          • 打開Ext API文檔,您已經上路!
          • 單擊 F12 打開 Firebug 控制臺。
          • 如果您的 firebug 控制臺處于單行模式(以 '>>>' 開頭),那么請單擊右下角的紅色上箭頭以開啟多行編輯模式。
          • 輸入以下代碼,并敲擊 Ctrl-Enter 來運行:
          Ext.get(document.body).update('<div id="test"></div>');

          上邊這行代碼的作用是將當前DOM body元素用一個ID為test的div元素替換。剛才那些API文檔已經被刪除,但 Ext 代碼依舊生效,并且隨時為您效勞。

          現在,我們假設您希望簡單的添加一個面板元素(Panel),但對Ext.Panel的API冗繁的說明無能為力。那么試著將這些代碼添加到 firebug 的控制臺中:

          Ext.get(document.body).update('<div id="test"></div>');
          new Ext.Panel({
          renderTo: 'test',
          width: '200px',
          title: 'My Title',
          html: 'My HTML content'
          });

          再次敲擊 Ctrl-Enter 。嗨!您的面板元素已經誕生。

          很好,不過如果修改一些選項呢?用下邊的代碼替換剛才的那些代碼:

          Ext.get(document.body).update('<div id="test"></div>');
          new Ext.Panel({
          renderTo: 'test',
          width: '200px',
          title: 'My Title',
          html: 'My HTML content',
          collapsible: true
          });

          敲擊 Ctrl-Enter 。怎么樣,一個可以伸縮的面板就配置好了。(注意面板右上角的小圖標)

          每次敲擊 Ctrl-Enter ,第一行代碼都會移除現有的內容,這樣您就可以有一個干凈的調試環境。這是一個簡單的小技巧,十分方便您嘗試各種配置選項。

          您可以為update()函數添加所需要的 HTML 代碼,無論多少。然后編寫或多或少的 Javascript 來探索 Ext API。

          還等什么?現在就去親自實踐 Ext Api 吧。

          Retrieved from "
          posted on 2009-05-18 10:21 小菜毛毛 閱讀(2041) 評論(0)  編輯  收藏 所屬分類: EXTJS
          主站蜘蛛池模板: 旬阳县| 双柏县| 铁力市| 嘉祥县| 河东区| 普定县| 虎林市| 铜川市| 库伦旗| 浦江县| 西乌| 酒泉市| 阿鲁科尔沁旗| 安国市| 牡丹江市| 双鸭山市| 扎赉特旗| 远安县| 泰和县| 龙陵县| 年辖:市辖区| 台东市| 化州市| 崇义县| 石河子市| 错那县| 台前县| 抚远县| 遵义县| 司法| 炉霍县| 潜山县| 浦北县| 商都县| 双鸭山市| 防城港市| 盈江县| 卢龙县| 睢宁县| 友谊县| 盘山县|