不卡在线视频,欧美一区不卡,a视频在线

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

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

Ext JS 概述

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

Ext JS 提供出色的性能。這個框架是完全面向?qū)ο笄铱蓴U展的。因為 Ext JS 是用 JavaScript 編寫的，所以只需下載并安裝，就可以使用 Ext JS 的特性。

許可協(xié)議

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

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

Ext JS 瀏覽器支持

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

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

設(shè)計模式和 Ext JS

開發(fā)人員應(yīng)該會喜歡 Ext JS 經(jīng)過深思熟慮的設(shè)計和實現(xiàn)。它的面向?qū)ο笤O(shè)計模式反映了對象之間的關(guān)系和交互。據(jù)設(shè)計者說，開發(fā) Ext JS 時使用的設(shè)計模式在很大程度上受到 Head First Design Patterns 這本書（Eric Freeman 等著，參見參考資料）的影響。查看 Ext JS 源代碼，就會發(fā)現(xiàn)創(chuàng)建模式（包括 singleton 設(shè)計模式）、結(jié)構(gòu)模式（包括 flyweight 設(shè)計模式）和行為模式（包括 observer 模式）。

回頁首

用 Ext JS 構(gòu)建富因特網(wǎng)應(yīng)用程序

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

如果使用其他框架，JavaScript 文件的包含次序是可以修改的。但是，Ext JS 通常按照清單 1 那樣包含在 Web 應(yīng)用程序中（假設(shè) Ext JS 安裝在 Web 服務(wù)器上的 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 框架。可以按照上面的排列引用文件，也可以只包含應(yīng)用程序中使用的元素所需的文件。

Ext JS 的集成

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

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

用戶界面元素

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

表單

Ext JS 提供一組用來創(chuàng)建交互式表單的工具。圖 1 給出一個表單示例。清單 2 給出相關(guān)的實現(xiàn)。

圖 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 支持創(chuàng)建用于用戶輸入的模態(tài)對話框，還支持實現(xiàn)選項卡式用戶界面，以便充分利用屏幕空間。圖 2 中對話框的源代碼見清單 3 。

圖 2. Ext JS 模態(tài)對話框和選項卡

清單 3. Ext JS 模態(tài)對話框的源代碼

            

            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);

創(chuàng)建樹

如圖 3 所示，Ext JS 還提供樹控件，這種控件提供用戶熟悉的與文件系統(tǒng)相似的視圖。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);

網(wǎng)格

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

圖 4. Ext JS 網(wǎng)格控件

清單 5. Ext JS 網(wǎng)格控件的源代碼

            

            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 實現(xiàn)。通常，Ajax 應(yīng)用程序的一個共有特性是應(yīng)用程序可以異步地響應(yīng)用戶輸入，它會更新部分用戶界面，而不需要重新顯示整個 Web 頁面。清單 6 給出一個典型的 Ext JS Ajax 實現(xiàn)：當(dāng)單擊按鈕時，HTML 文本框和按鈕元素把文本框中的數(shù)據(jù)發(fā)送給 Web 服務(wù)器。

清單 6. Ext JS 的 Ajax 實現(xiàn)

            

            <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" />

當(dāng)用戶單擊 OK 時，使用 Ext JS UpdateManage 類發(fā)出 Ajax 調(diào)用，這比傳統(tǒng)的 Ajax HttpRequest 調(diào)用簡單多了。

Ext JS 與其他 Web 服務(wù)器框架的集成

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

Ext JS 開發(fā)工具

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

結(jié)束語

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

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

參考資料

學(xué)習(xí)

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

獲得產(chǎn)品和技術(shù)

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

討論

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

關(guān)于作者


		John Fronckowiak 是 IDC Consulting Inc. 和 Western New York Web Design, LLC 的總裁兼創(chuàng)辦人。他還是曼達爾學(xué)院計算機信息系統(tǒng)的臨床助理教授。他還撰寫了幾本關(guān)于編程、數(shù)據(jù)庫設(shè)計和開發(fā)以及聯(lián)網(wǎng)的書。

用 Ext JS 構(gòu)建 Ajax 應(yīng)用程序

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

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

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

2元

5元

10元

20元

自定義