免费看aa,亚洲国产天堂久久精品网,www色视频片内射

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

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

Ext JS 概述

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

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

許可協(xié)議

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

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

開發(fā)人員應(yīng)該會(huì)喜歡 Ext JS 經(jīng)過深思熟慮的設(shè)計(jì)和實(shí)現(xiàn)。它的面向?qū)ο笤O(shè)計(jì)模式反映了對象之間的關(guān)系和交互。據(jù)設(shè)計(jì)者說，開發(fā) Ext JS 時(shí)使用的設(shè)計(jì)模式在很大程度上受到 Head First Design Patterns 這本書（Eric Freeman 等著，參見參考資料）的影響。查看 Ext JS 源代碼，就會(huì)發(fā)現(xiàn)創(chuàng)建模式（包括 singleton 設(shè)計(jì)模式）、結(jié)構(gòu)模式（包括 flyweight 設(shè)計(jì)模式）和行為模式（包括 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 包含整個(gè) 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 框架的主體是大量用戶界面元素。這些元素包括表單、對話框、選項(xiàng)卡、樹和網(wǎng)格。

表單

Ext JS 提供一組用來創(chuàng)建交互式表單的工具。圖 1 給出一個(gè)表單示例。清單 2 給出相關(guān)的實(shí)現(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);

對話框和選項(xiàng)卡

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

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

清單 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)格

最強(qiáng)大的 Ext JS 用戶界面元素可能是網(wǎng)格控件。可以通過它顯示來自后端數(shù)據(jù)源的數(shù)據(jù)和其他結(jié)構(gòu)化數(shù)據(jù)，比如 XML 和數(shù)組。如圖 4 所示，Ext JS 網(wǎng)格可以實(shí)現(xiàn)分頁和列排序。這個(gè)示例接收來自 ExtJS.com 論壇的最新主題，強(qiáng)調(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 實(shí)現(xiàn)。通常，Ajax 應(yīng)用程序的一個(gè)共有特性是應(yīng)用程序可以異步地響應(yīng)用戶輸入，它會(huì)更新部分用戶界面，而不需要重新顯示整個(gè) Web 頁面。清單 6 給出一個(gè)典型的 Ext JS Ajax 實(shí)現(xiàn)：當(dāng)單擊按鈕時(shí)，HTML 文本框和按鈕元素把文本框中的數(shù)據(jù)發(fā)送給 Web 服務(wù)器。

清單 6. Ext JS 的 Ajax 實(shí)現(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 時(shí)，使用 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)于與這些框架集成的詳細(xì)信息，參見參考資料。

Ext JS 開發(fā)工具

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

結(jié)束語

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

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

參考資料

學(xué)習(xí)

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

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

Ext JS version 2.0 框架：下載這個(gè)框架。
IBM? 試用軟件：用 IBM 試用軟件改進(jìn)您的下一個(gè)開放源碼開發(fā)項(xiàng)目，這些軟件可以下載或者通過 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)辦人。他還是曼達(dá)爾學(xué)院計(jì)算機(jī)信息系統(tǒng)的臨床助理教授。他還撰寫了幾本關(guān)于編程、數(shù)據(jù)庫設(shè)計(jì)和開發(fā)以及聯(lián)網(wǎng)的書。

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

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

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

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

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

2元

5元

10元

20元

自定義

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频