精品久久久噜噜噜久久7,青青久在线视频,亚洲色图图

Ext JS 是一種強大的 JavaScript? 庫，它通過使用可重用的對象和部件簡化了 Asynchronous JavaScript + XML（Ajax）開發。本文介紹 Ext JS，概述它背后的面向對象 JavaScript 設計概念，解釋如何使用 Ext JS 框架開發富因特網應用程序的用戶界面元素。

當今有許許多多的 Web 開發框架，開發人員很難判斷哪些框架值得花時間去學習。Ext JS 是一種 JavaScript 開發框架，這種強大的 JavaScript 庫通過使用可重用的對象和部件簡化了 Ajax 開發，Web 應用程序開發人員應該認真考慮使用這個工具。Ext JS 最初是 Jack Slocum 編寫的一組 Yahoo! User Interface（YUI）Library 擴展。但是，隨著 2.0 版的發布，它已經成為市場上最簡單最強大的 JavaScript 庫。

Ext JS 概述

Ext JS 項目最初的目的是擴展 YUI Library 提供的功能。YUI Library 的一個關鍵方面是跨瀏覽器支持，這也可以在 Ext JS 中找到。這種支持使開發人員在構建 Web 應用程序時不需要考慮目標瀏覽器。

Ext JS 提供出色的性能。這個框架是完全面向對象且可擴展的。因為 Ext JS 是用 JavaScript 編寫的，所以只需下載并安裝，就可以使用 Ext JS 的特性。

許可協議

在采用一個新框架之前，一定要了解框架基于哪種許可協議條款。Ext JS 提供幾個許可協議選項：

開放源碼許可證： 這采用 Open Source LGPL 3.0 許可證的條款。如果打算在另一個開放源碼項目或者個人、教育或非盈利項目中使用 Ext JS，這是最合適的許可證。
商用許可證： 如果希望在項目中使用 Ext JS 時避免開發源碼許可證的某些限制，或者由于內部原因必須擁有許可證，或者希望在商業上支持 Ext JS 的開發，這是最合適的許可證。參考資料中提供了 Ext JS 站點的鏈接，這個站點提供關于商用許可證的詳細信息。
原始設備生產商（OEM）/轉售商許可證： 如果您打算對 Ext JS 進行重新打包，或者作為軟件開發庫銷售 Ext JS，這種許可證是最合適的。

Ext JS 瀏覽器支持

所有主流的 Web 瀏覽器都支持 Ext JS 框架，包括：

Windows? Internet Explorer? 6 及更高版本。
Mozilla Firefox 1.5 及更高版本（PC 和 Macintosh）。
Apple Safari 2 及更高版本。
Opera 9 及更高版本（PC 和 Mac）。

設計模式和 Ext JS

開發人員應該會喜歡 Ext JS 經過深思熟慮的設計和實現。它的面向對象設計模式反映了對象之間的關系和交互。據設計者說，開發 Ext JS 時使用的設計模式在很大程度上受到 Head First Design Patterns 這本書（Eric Freeman 等著，參見參考資料）的影響。查看 Ext JS 源代碼，就會發現創建模式（包括 singleton 設計模式）、結構模式（包括 flyweight 設計模式）和行為模式（包括 observer 模式）。

回頁首

用 Ext JS 構建富因特網應用程序

Ext JS 提供大量用戶界面元素，這是開發富因特網應用程序（RIA）所必需的。Ext JS 包含消息框、組合框、數據網格和工具欄等控件。另外，還可以通過布局管理器指定元素在頁面上的顯示方式。還有用于操作表單和窗口的其他特性。

如果使用其他框架，JavaScript 文件的包含次序是可以修改的。但是，Ext JS 通常按照清單 1 那樣包含在 Web 應用程序中（假設 Ext JS 安裝在 Web 服務器上的 lib/ext 目錄中）：

清單 1. 包含 Ext JS 框架

            

            <script type ="text/javascript" src="lib/ext/ext-base.js"></script>
            

            <script type ="text/javascript" src="lib/ext/ext-all.js"></script>

ext-all.js 包含整個 Ext JS 框架。可以按照上面的排列引用文件，也可以只包含應用程序中使用的元素所需的文件。

Ext JS 的集成

可以把 Ext JS 與其他常用的服務器端 Web 開發框架一起使用，包括 PHP、Java? 語言、Microsoft? .NET、Ruby on Rails 和 ColdFusion。

如果結合使用 Ext JS 框架和其他 JavaScript 庫，請參考安裝根目錄中的 INCLUDE_ORDER.txt 文件，它說明了在應用程序中包含庫的次序。

用戶界面元素

Ext JS 框架的主體是大量用戶界面元素。這些元素包括表單、對話框、選項卡、樹和網格。

表單

Ext JS 提供一組用來創建交互式表單的工具。圖 1 給出一個表單示例。清單 2 給出相關的實現。

圖 1. Ext JS 表單示例

清單 2. Ext JS 表單示例的源代碼

            

            var top = new Ext.FormPanel({
            

                labelAlign: 'top',
            

                frame:true,
            

                title: 'Multi Column, Nested Layouts and Anchoring',
            

                bodyStyle:'padding:5px 5px 0',
            

                width: 600,
            

                items: [{
            

                    layout:'column',
            

                    items:[{
            

                        columnWidth:.5,
            

                        layout: 'form',
            

                        items: [{
            

                            xtype:'textfield',
            

                            fieldLabel: 'First Name',
            

                            name: 'first',
            

                            anchor:'95%'
            

                        }, {
            

                            xtype:'textfield',
            

                            fieldLabel: 'Company',
            

                            name: 'company',
            

                            anchor:'95%'
            

                        }]
            

                    },{
            

                        columnWidth:.5,
            

                        layout: 'form',
            

                        items: [{
            

                        xtype:'textfield',
            

                        fieldLabel: 'Last Name',
            

                        name: 'last',
            

                        anchor:'95%'
            

                    },{
            

                        xtype:'textfield',
            

                        fieldLabel: 'Email',
            

                        name: 'email',
            

                        vtype:'email',
            

                        anchor:'95%'
            

                    }]
            

                }]
            

                },{
            

                    xtype:'htmleditor',
            

                    id:'bio',
            

                    fieldLabel:'Biography',
            

                    height:200,
            

                    anchor:'98%'
            

                }],
            

            

                    buttons: [{
            

                    text: 'Save'
            

                },{
            

                    text: 'Cancel'
            

                }]
            

            });
            

            

                top.render(document.body);

對話框和選項卡

如圖 2 所示，Ext JS 支持創建用于用戶輸入的模態對話框，還支持實現選項卡式用戶界面，以便充分利用屏幕空間。圖 2 中對話框的源代碼見清單 3 。

圖 2. Ext JS 模態對話框和選項卡

清單 3. Ext JS 模態對話框的源代碼

            

            var LayoutExample = function(){
            

            // everything in this space is private and only accessible in the HelloWorld block
            

            

            // define some private variables
            

            var dialog, showBtn;
            

            

            var toggleTheme = function(){
            

                Ext.get(document.body, true).toggleClass('xtheme-gray');
            

            };
            

            // return a public interface
            

            return {
            

                init : function(){
            

                showBtn = Ext.get('show-dialog-btn');
            

                // attach to click event
            

                showBtn.on('click', this.showDialog, this);       
            

            },
            

            

            showDialog : function(){
            

                if(!dialog){ // lazy initialize the dialog and only create it once
            

                  dialog = new Ext.LayoutDialog("hello-dlg", { 
            

                  modal:true,
            

                  width:600,
            

                  height:400,
            

                  shadow:true,
            

                  minWidth:300,
            

                  minHeight:300,
            

                  proxyDrag: true,
            

                  west: {
            

                    split:true,
            

                    initialSize: 150,
            

                    minSize: 100,
            

                    maxSize: 250,
            

                    titlebar: true,
            

                    collapsible: true,
            

                    animate: true
            

                  },
            

                  center: {
            

                    autoScroll:true,
            

                    tabPosition: 'top',
            

                    closeOnTab: true,
            

                    alwaysShowTabs: true
            

                  }
            

              });
            

              dialog.addKeyListener(27, dialog.hide, dialog);
            

              dialog.addButton('Submit', dialog.hide, dialog);
            

              dialog.addButton('Close', dialog.hide, dialog);
            

            

              var layout = dialog.getLayout();
            

              layout.beginUpdate();
            

              layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
            

              layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
            

              // generate some other tabs
            

              layout.add('center', new Ext.ContentPanel(Ext.id(), {
            

                autoCreate:true, title: 'Another Tab', background:true}));
            

              layout.add('center', new Ext.ContentPanel(Ext.id(), {
            

                autoCreate:true, title: 'Third Tab', closable:true, background:true}));
            

              layout.endUpdate();
            

            }
            

            dialog.show(showBtn.dom);
            

            }
            

            };
            

            }();
            

            

            // using onDocumentReady instead of window.onload initializes the application
            

            // when the DOM is ready, without waiting for images and other resources to load
            

            Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);

創建樹

如圖 3 所示，Ext JS 還提供樹控件，這種控件提供用戶熟悉的與文件系統相似的視圖。Ext JS 樹控件完全支持拖放功能。圖 3 所示樹控件的源代碼見清單 4 。

圖 3. Ext JS 樹控件

清單 4. Ext JS 樹控件的源代碼

            

            var TreeTest = function(){
            

            // shorthand
            

              var Tree = Ext.tree;
            

            

              return {
            

                init : function(){
            

                  // yui-ext tree
            

                  var tree = new Tree.TreePanel({
            

                      el:'tree',
            

                      animate:true, 
            

                      autoScroll:true,
            

                      loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
            

                      enableDD:true,
            

                      containerScroll: true,
            

                      dropConfig: {appendOnly:true}
            

                  });
            

            

                  // add a tree sorter in folder mode
            

                  new Tree.TreeSorter(tree, {folderSort:true});
            

            

                  // set the root node
            

                  var root = new Tree.AsyncTreeNode({
            

                    text: 'Ext JS', 
            

                    draggable:false, // disable root node dragging
            

                    id:'source'
            

                  });
            

                  tree.setRootNode(root);
            

            

                  // render the tree
            

                  tree.render();
            

            

                  root.expand(false, /*no anim*/ false);
            

            

                  //-------------------------------------------------------------
            

            

                  // YUI tree            
            

                  var tree2 = new Tree.TreePanel({
            

                      el:'tree2',
            

                      animate:true,
            

                      autoScroll:true,
            

                      loader: new Ext.tree.TreeLoader({
            

                        dataUrl:'get-nodes.php',
            

                        baseParams: {lib:'yui'} // custom http params
            

                      }),
            

                      containerScroll: true,
            

                      enableDD:true,
            

                      dropConfig: {appendOnly:true}
            

                  });
            

            

                  // add a tree sorter in folder mode
            

                  new Tree.TreeSorter(tree2, {folderSort:true});
            

            

                  // add the root node
            

                  var root2 = new Tree.AsyncTreeNode({
            

                      text: 'My Files', 
            

                      draggable:false, 
            

                      id:'yui'
            

                  });
            

                  tree2.setRootNode(root2);
            

                  tree2.render();
            

            

                  root2.expand(false, /*no anim*/ false);
            

                }
            

              };
            

            }();
            

            

            Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

網格

最強大的 Ext JS 用戶界面元素可能是網格控件。可以通過它顯示來自后端數據源的數據和其他結構化數據，比如 XML 和數組。如圖 4 所示，Ext JS 網格可以實現分頁和列排序。這個示例接收來自 ExtJS.com 論壇的最新主題，強調了 Ext JS 框架的 Ajax 功能。圖 4 所示網格的源代碼見清單 5 。

圖 4. Ext JS 網格控件

清單 5. Ext JS 網格控件的源代碼

            

            Ext.onReady(function(){
            

            

              // create the Data Store
            

              var store = new Ext.data.Store({
            

              // load using script tags for cross domain, if the data in on the same domain as
            

              // this page, an HttpProxy would be better
            

              proxy: new Ext.data.ScriptTagProxy({
            

                url: 'http://extjs.com/forum/topics-browse-remote.php'
            

              }),
            

            

              // create reader that reads the Topic records
            

              reader: new Ext.data.JsonReader({
            

                root: 'topics',
            

                totalProperty: 'totalCount',
            

                id: 'threadid',
            

                fields: [
            

                  'title', 'forumtitle', 'forumid', 'author',
            

                  {name: 'replycount', type: 'int'},
            

                  {name: 'lastpost', mapping: 'lastpost', type: 'date', 
            

                      dateFormat: 'timestamp'},
            

                  'lastposter', 'excerpt'
            

                ]
            

              }),
            

            

              // turn on remote sorting
            

              remoteSort: true
            

            });
            

            store.setDefaultSort('lastpost', 'desc');
            

            

            // pluggable renders
            

            function renderTopic(value, p, record){
            

              return String.format(
            

              '<b><a  
            

                  target="_blank">{0}</a></b>
            

                  <a  
            

                  target="_blank">{1} Forum</a>',
            

                value, record.data.forumtitle, record.id, record.data.forumid);
            

            }
            

            function renderLast(value, p, r){
            

            return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), 
            

                                 r.data['lastposter']);
            

            }
            

            

            // the column model has information about grid columns
            

            // dataIndex maps the column to the specific data field in
            

            // the data store
            

            var cm = new Ext.grid.ColumnModel([{
            

                id: 'topic',
            

                header: "Topic",
            

                dataIndex: 'title',
            

                width: 420,
            

                renderer: renderTopic
            

              },{
            

                header: "Author",
            

                dataIndex: 'author',
            

                width: 100,
            

                hidden: true
            

              },{
            

                header: "Replies",
            

                dataIndex: 'replycount',
            

                width: 70,
            

                align: 'right'
            

              },{
            

                id: 'last',
            

                header: "Last Post",
            

                dataIndex: 'lastpost',
            

                width: 150,
            

                renderer: renderLast
            

            }]);
            

            

            // by default columns are sortable
            

            cm.defaultSortable = true;
            

            

            var grid = new Ext.grid.GridPanel({
            

                el:'topic-grid',
            

                width:700,
            

                height:500,
            

                title:'ExtJS.com - Browse Forums',
            

                store: store,
            

                cm: cm,
            

                trackMouseOver:false,
            

                sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
            

                loadMask: true,
            

                viewConfig: {
            

                  forceFit:true,
            

                  enableRowBody:true,
            

                  showPreview:true,
            

                  getRowClass : function(record, rowIndex, p, store){
            

                    if(this.showPreview){
            

                    p.body = '<p>'+record.data.excerpt+'</p>';
            

                      return 'x-grid3-row-expanded';
            

                  }
            

                  return 'x-grid3-row-collapsed';
            

                }
            

            },
            

            bbar: new Ext.PagingToolbar({
            

              pageSize: 25,
            

              store: store,
            

              displayInfo: true,
            

              displayMsg: 'Displaying topics {0} - {1} of {2}',
            

              emptyMsg: "No topics to display",
            

              items:[
            

                '-', {
            

                pressed: true,
            

                enableToggle:true,
            

                text: 'Show Preview',
            

                cls: 'x-btn-text-icon details',
            

                toggleHandler: toggleDetails
            

              }]
            

            })
            

            });
            

            

            // render it
            

            grid.render();
            

            

            // trigger the data store load
            

            store.load({params:{start:0, limit:25}});
            

            

            function toggleDetails(btn, pressed) {
            

                var view = grid.getView();
            

                view.showPreview = pressed;
            

                view.refresh();
            

            }
            

            });

Ext JS 和 Ajax

Ext JS 框架支持 Ajax 實現。通常，Ajax 應用程序的一個共有特性是應用程序可以異步地響應用戶輸入，它會更新部分用戶界面，而不需要重新顯示整個 Web 頁面。清單 6 給出一個典型的 Ext JS Ajax 實現：當單擊按鈕時，HTML 文本框和按鈕元素把文本框中的數據發送給 Web 服務器。

清單 6. Ext JS 的 Ajax 實現

            

            <script type =”text/javascript”>
            

            Ext.onReady(function(){
            

              Ext.get('okButton').on('click', function(){
            

                var msg = Ext.get("msg");
            

                msg.load({
            

                  url: [server url], // <-- replace with your url
            

                    params: "name=" + Ext.get('name').dom.value,
            

                    text: "Updating..."
            

                });
            

                msg.show();
            

              });
            

            });
            

            </script>
            

            

            <div id="msg" style="visibility: hidden"></div>
            

            Name: <input type="text" id="name" /><br />
            

            <input type="button" id="okButton" value="OK" />

當用戶單擊 OK 時，使用 Ext JS UpdateManage 類發出 Ajax 調用，這比傳統的 Ajax HttpRequest 調用簡單多了。

Ext JS 與其他 Web 服務器框架的集成

可以把 Ext JS 與其他常用的服務器端 Web 開發框架一起使用，包括 PHP、Java 語言、Microsoft .NET、Ruby on Rails 和 ColdFusion。關于與這些框架集成的詳細信息，參見參考資料。

Ext JS 開發工具

可以在幾種流行的集成開發環境（IDE）中進行 Ext JS 開發，包括 Eclipse、Aptana 和 Komodo。關于 IDE 對 Ext JS 開發的支持的信息，參見參考資料。

結束語

Web 開發框架常常承諾簡化和加快應用程序開發，但是許多框架都沒有實現這個目標。Ext JS 通過一個易用的開發模型實現了它的承諾。最新的 Ext JS 版本（2.0）表明，它正在快速進步，可以成為 RIA 開發的基礎。

本文只是粗略地介紹 Ext JS 框架的主要特性，Ext JS 的特性遠不止這些。現在，如果要進行更深入的探索，請從 ExtJS.com Web 站點和交互式示例開始！

參考資料

學習

您可以參閱本文在 developerWorks 全球網站上的英文原文。
Tutorial: Introduction to Ext ：這個教程可以幫助您開始使用 Ext JS。
Ext JS 文檔：閱讀 2.0 版 API 的文檔。
獲得關于 Ext JS 商用許可證的更多信息。
“ 設計復合應用程序：設計模式 ”：了解關于設計模式的更多信息（Jo Grant 和 Craig Wolpert，developerWorks，2008 年 2 月）。
Head First Design Patterns ：閱讀 Eric Freeman 等撰寫的這本書（O'Reilly，2004），它影響了 Ext JS 2.0 的設計。
掌握 Ajax 系列 ：閱讀這個全面介紹 Ajax 的 developerWorks 文章系列。
Server-side frameworks for Ext JS ：了解 Ext JS 與 Python、PHP 和 Microsoft .NET 等框架集成的詳細信息。
技術書店：瀏覽關于這些主題和其他技術主題的圖書。
IBM 技術活動和網絡廣播：隨時關注 developerWorks 的技術活動和網絡廣播。

獲得產品和技術

Ext JS version 2.0 框架：下載這個框架。
IBM? 試用軟件：用 IBM 試用軟件改進您的下一個開放源碼開發項目，這些軟件可以下載或者通過 DVD 獲得。

討論

Ext JS 論壇：參與 Ext JS 社區。
Ext JS blog ：這些 blog 是尋找關于 Ext JS 的新聞和信息的首選位置。
developerWorks blog ：參與并加入 developerWorks 社區。

關于作者


		John Fronckowiak 是 IDC Consulting Inc. 和 Western New York Web Design, LLC 的總裁兼創辦人。他還是曼達爾學院計算機信息系統的臨床助理教授。他還撰寫了幾本關于編程、數據庫設計和開發以及聯網的書。

用 Ext JS 構建 Ajax 應用程序

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義