欧洲美女视频高清播放器,美女视频a视美女视频

超COOL好用的Ext!!(教程)

下載Ext如果你未曾下載過(guò)，那應(yīng)從這里下載最新版本的Ext http://extjs.com/downloads 。

針對(duì)你的下載需求，有幾個(gè)不同的彈性選項(xiàng)。通常地，最穩(wěn)定的版本，是較多人的選擇。下載解包后，那個(gè)example文件夾便是一個(gè)探索Ext的好地方！

開(kāi)始！

我們將使用Ext，來(lái)完成一些JavaScript任務(wù)。
Zip文件包括三個(gè)文件：ExtStart.html, ExtStart.js和ExtStart.css。解包這三個(gè)文件到Ext的安裝目錄中（例如，Ext是在“C:\code\Ext\v1.0”中，那應(yīng)該在"v1.0"里面新建目錄“tutorial”。雙擊ExtStart.htm，接著你的瀏覽器打開(kāi)啟動(dòng)頁(yè)面，應(yīng)該會(huì)有一條消息告訴你配置已完畢。如果是一個(gè)Javascript錯(cuò)誤，請(qǐng)按照頁(yè)面上的指引操作。
在你常用的IDE中或文本編輯器中，打開(kāi)ExtStart.js看看：
Ext.onReady可能是你接觸的第一個(gè)方法。這個(gè)方法是指當(dāng)前DOM加載完畢后，保證頁(yè)面內(nèi)的所有元素能被Script引用（reference）。你可刪除alert()那行，加入一些實(shí)際用途的代碼試試：

Ext.onReady(function() {

alert("Congratulations! You have Ext configured correctly!");

});

Element：Ext的核心大多數(shù)的JavaScript操作都需要獲取頁(yè)面上的某個(gè)元素（reference）,好讓你來(lái)做有趣的事情。傳統(tǒng)的JavaScript方法，是通過(guò)ID獲取Dom節(jié)點(diǎn)的：

var myDiv = document.getElementById('myDiv');

這毫無(wú)問(wèn)題，不過(guò)這樣單單返回一個(gè)對(duì)象（DOM節(jié)點(diǎn)），用起來(lái)并不是太強(qiáng)大和好用。為了要用那節(jié)點(diǎn)干點(diǎn)事情，你將會(huì)要寫(xiě)不少自定義的代碼；另外，對(duì)于不同類型瀏覽器之間的差異，要你處理起來(lái)可真頭大了。

進(jìn)入Ext.element對(duì)象。元素（element）的的確確是Ext的心臟地帶，--無(wú)論是訪問(wèn)元素（elements）還是完成一些動(dòng)作，都要涉及它。Element的API是整個(gè)Ext庫(kù)的基礎(chǔ)，如果你時(shí)間不多，只想了解Ext中的一個(gè)類的話，Element一定是首選！
由ID獲取一個(gè)Ext Element如下（首頁(yè)ExtStart.htm包含一個(gè)div，ID名字為“myDiv”，然后，在ExtStart.js中加入下列語(yǔ)句）：

Ext.onReady(function() {var myDiv = Ext.get('myDiv');});

再回頭看看Element對(duì)象，發(fā)現(xiàn)什么有趣的東東呢？

Element包含了常見(jiàn)的DOM方法和屬性，提供一個(gè)快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問(wèn)底層DOM的節(jié)點(diǎn)。）；
Element.get()方法內(nèi)置緩存處理（Cache)，多次訪問(wèn)同一對(duì)象效率上有極大優(yōu)勢(shì)；
內(nèi) 置常用的DOM節(jié)點(diǎn)的動(dòng)作，并且是跨瀏覽器的定位的位置、大小、動(dòng)畫(huà)、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。

這意味著你可用少量的代碼來(lái)做各種各樣的事情，這里僅僅是一個(gè)簡(jiǎn)單的例子（完整的列表在ElementAPI中）。
繼續(xù)在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：

myDiv.highlight(); //黃色高亮顯示然后漸退

myDiv.addClass('red'); // 添加自定義CSS類 (在ExtStart.css定義)

myDiv.center(); //在視圖中將元素居中

myDiv.setOpacity(.25); // 使元素半透明

獲取多個(gè)DOM的節(jié)點(diǎn)

通常情況下，不能由ID獲取多個(gè)DOM的節(jié)點(diǎn)，有可能因?yàn)闆](méi)設(shè)置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你會(huì)不用ID來(lái)作為獲取元素的依據(jù)，可能會(huì)用屬性（attribute）或CSS Classname代替?；谝陨系脑颍珽xt引入了一個(gè)功能異常強(qiáng)大的DomSelector庫(kù)，叫做DomQuery。

DomQuery可作為單獨(dú)的庫(kù)使用，但常用于Ext，你可以在上下文環(huán)境中（Context）獲取多個(gè)元素，然后通過(guò)Element接口調(diào)用。幸運(yùn)的是，Element對(duì)象本身便有Element.selcect的方法來(lái)實(shí)現(xiàn)查詢，即內(nèi)部調(diào)用DomQuery選取元素。這個(gè)簡(jiǎn)單的例子中，ExtStart.htm包含若干段落（<p>標(biāo)簽），沒(méi)有一個(gè)是有ID的，而你想輕松地通過(guò)一次操作馬上獲取每一段，全體執(zhí)行它們的動(dòng)作，可以這樣做：

// 每段高亮顯示

Ext.select('p').highlight();

DomQuery的選取參數(shù)是一段較長(zhǎng)的數(shù)組，其中包括W3C CSS3 Dom選取器、基本XPatch、HTML屬性和更多，請(qǐng)參閱DomQuery API文檔以了解這功能強(qiáng)大的庫(kù)的細(xì)節(jié)。

響應(yīng)事件

到這范例為止，我們所寫(xiě)的代碼都是放在onReady中，即當(dāng)頁(yè)面加載后總會(huì)立即執(zhí)行，功能較單一——這樣的話，你便知道，如何響應(yīng)某個(gè)動(dòng)作或事件來(lái)執(zhí)行你希望做的事情，做法是，先分配一個(gè)function，再定義一個(gè)eventhandler事件處理器來(lái)響應(yīng)。我們由這個(gè)簡(jiǎn)單的范例開(kāi)始，打開(kāi)ExtStart.htm，編輯下列的代碼：

Ext.onReady(function() {

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

alert("You clicked the button");

});

加載好頁(yè)面，代碼依然會(huì)執(zhí)行，不過(guò)區(qū)別是，包含alert()的function是已定義好的，但它不會(huì)立即地被執(zhí)行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監(jiān)聽(tīng)任何發(fā)生元素被單擊的情況，并分配一個(gè)function,以準(zhǔn)備任何單擊元素的情況。
正路來(lái)說(shuō)，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁(yè)面中的某一段落被單擊后，便有彈出窗口：

Ext.onReady(function() {

Ext.select('p').on('click', function() {

alert("You clicked a paragraph");

});

這兩個(gè)例子中，事件處理的function均是簡(jiǎn)單幾句，沒(méi)有函數(shù)的名稱，這種類型函數(shù)稱為“匿名函數(shù)（anonymousfunction）”，即是沒(méi)有名的的函數(shù)。你也可以分配一個(gè)有名字的eventhandler,這對(duì)于代碼的重用或多個(gè)事件很有用。下一例等效于上一例：

Ext.onReady(function() {

var paragraphClicked = function() {

alert("You clicked a paragraph");

}

Ext.select('p').on('click', paragraphClicked);

});

到目前為止，我們已經(jīng)知道如何執(zhí)行某個(gè)動(dòng)作。但當(dāng)事件觸發(fā)時(shí)，我們?nèi)绾蔚弥@個(gè)eventhandler執(zhí)行時(shí)是作用在哪一個(gè)特定的元素上呢？要明確這一點(diǎn)非常簡(jiǎn)單，Element.on方法傳入到evenhandler的function中（我們這里先討論第一個(gè)參數(shù)，不過(guò)你應(yīng)該瀏覽API文檔以了解evenhandler更多的細(xì)節(jié)）。在我們之前的例子中，function是忽略這些參數(shù)的，到這里可有少許的改變，——我們?cè)诠δ苌咸峁┝烁顚哟蔚目刂?。必須先說(shuō)明的是，這實(shí)際上是Ext的事件對(duì)象（eventobject）,一個(gè)跨瀏覽器和擁有更多控制的事件。例如，可以用下列的語(yǔ)句，恢復(fù)這個(gè)事件的指定的DOM節(jié)點(diǎn)：

Ext.onReady(function() {

var paragraphClicked = function(e) {

Ext.get(e.target).highlight();

}

Ext.select('p').on('click', paragraphClicked);

});

注意指定的是DOM節(jié)點(diǎn)，所以我們首先將其恢復(fù)成為適當(dāng)?shù)脑?，然后?zhí)行欲完成的事件，這個(gè)例子中，我們看見(jiàn)段落是高亮顯示的。

使用Widgets

(Widget原意為“小器件”，現(xiàn)指頁(yè)面中UI控件)

除了我們已經(jīng)討論過(guò)的核心JavaScript庫(kù)，現(xiàn)在的Ext亦包括了一系列的最前端的JavaScirptUI組件庫(kù)。文本以一個(gè)最常用的widget為例子，作簡(jiǎn)單的介紹。

MessageBox

比起略為沉悶的“HelloWolrd”消息窗口，我們做少許變化，前面我們寫(xiě)的代碼是，單擊某個(gè)段落便會(huì)高亮顯示，現(xiàn)在是單擊段落，在消息窗口中顯示段落內(nèi)容出來(lái)。
在上面的paragraphClicked的function中，將這行代碼：

Ext.get(e.target).highlight();

替換為：

var paragraph = Ext.get(e.target);

paragraph.highlight();

Ext.MessageBox.show({

title: 'Paragraph Clicked',

msg: paragraph.dom.innerHTML,

width:400,

buttons: Ext.MessageBox.OK,

animEl: paragraph

});

這里有些新的概念討論一下。在第一行中我們創(chuàng)建了一個(gè)局部變量（LocalVariable）來(lái)保存某個(gè)元素的引用，即被單擊的那個(gè)DOM節(jié)點(diǎn)（本例中，我們總是段落paragrah,事因我們已經(jīng)定義該事件與<p>標(biāo)簽發(fā)生關(guān)聯(lián)的了）。為什么要這樣做呢？嗯...觀察上面的代碼，我們需要引用同一元素來(lái)高亮顯示，在MessageBox中也是引用同一元素作為參數(shù)使用。
一般來(lái)說(shuō)，多次重復(fù)使用同一值（Value）或?qū)ο螅且粋€(gè)不好的方式，所以，作為一個(gè)好的OOP開(kāi)發(fā)者，應(yīng)該是將其分配到一個(gè)局部變量中，反復(fù)使用這變量！

現(xiàn)在，觀察MessageBox的調(diào)用，準(zhǔn)備作為闡述新概念的演示用。乍一看，這像一連串的參數(shù)傳入到方法中，但仔細(xì)看，這是一個(gè)非常特別的語(yǔ)法。實(shí)際上，傳入到MessageBox.show的只有一個(gè)參數(shù)：一個(gè)Objectliteral,包含一組屬性和屬性值。在Javascript中，ObjectLiteral是動(dòng)態(tài)的，你可在任何時(shí)候用{和}創(chuàng)建一個(gè)典型的對(duì)象(object)。其中的字符由一系列的name/value組成的屬性，屬性的格式是[property name]:[property value]。在整個(gè)Ext中，你將會(huì)經(jīng)常遇到這種語(yǔ)法，因此你應(yīng)該消化掉這知識(shí)！
使用ObjectLiteral的原因是什么呢？主要的原因是“可伸縮性（flexibility）”的考慮"，隨時(shí)可新增、刪除屬性，亦可不管順序地插入。而方法不需要改變。這也是多個(gè)參數(shù)的情況下，為最終開(kāi)發(fā)者帶來(lái)不少的方便（本例中的MessageBox.show())。例如，我們說(shuō)這兒的foo.action方法，有四個(gè)參數(shù)，而只有一個(gè)是你必須傳入的。本例中，你想像中的代碼可能會(huì)是這樣的foo.action(null, null, null,'hello').,若果那方法用Object Literal來(lái)寫(xiě)，卻是這樣， foo.action({ param4: 'hello'})，這更易用和易讀。

GridGird

是Ext中人們最想先睹為快的Widgets之一，也是最流行之一。好，讓我們看看怎么輕松地創(chuàng)建一個(gè)Gird并運(yùn)行。用下列代碼替換ExtStart.js中全部語(yǔ)句：

Ext.onReady(function() {

var myData = [

['Apple',29.89,0.24,0.81,'9/1 12:00am'],

['Ext',83.81,0.28,0.34,'9/12 12:00am'],

['Google',71.72,0.02,0.03,'10/1 12:00am'],

['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],

['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

];

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(myData),

reader: new Ext.data.ArrayReader({id: 0}, [

{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

])

});

ds.load();

var colModel = new Ext.grid.ColumnModel([

{header: "Company", width: 120, sortable: true, dataIndex: 'company'},

{header: "Price", width: 90, sortable: true, dataIndex: 'price'},

{header: "Change", width: 90, sortable: true, dataIndex: 'change'},

{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},

{header: "Last Updated", width: 120, sortable: true,

renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}

]);

var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});

grid.render();

grid.getSelectionModel().selectFirstRow();

});

這看上去很復(fù)雜，但實(shí)際上加起來(lái)，只有七行代碼。第一行創(chuàng)建數(shù)組并作為數(shù)據(jù)源。實(shí)際案例中，你很可能從數(shù)據(jù)庫(kù)、或者WebService那里得到動(dòng)態(tài)的數(shù)據(jù)。接著，我們創(chuàng)建并加載data store， datastore將會(huì)告訴Ext的底層庫(kù)接手處理和格式化這些數(shù)據(jù)。接著，我們定義一個(gè)column模型，用來(lái)輕松地調(diào)配Gird的每一列參數(shù)。最后我們生成這個(gè)Gird,傳入data store和column模型兩個(gè)對(duì)象，進(jìn)行渲染并選好第一行。不是太困難吧？如果一切順利，搞掂之后你會(huì)看到像這樣的：

當(dāng)然，你可能對(duì)這段代碼的某些細(xì)節(jié)，并不完全掌握其中的含義（像MemoryProxy究竟是什么？）但先不要緊，這個(gè)例子的目的是告訴你，用少量的代碼，創(chuàng)建一個(gè)富界面的多功能的UI組件而已——這是完全可能的，更多細(xì)節(jié)的內(nèi)容，留給讀者你自己學(xué)習(xí)吧。這兒有許多學(xué)習(xí)Grid的資源。ExtGrid教程、交叉Gird演示和Grid API文檔。

還有更多的..
這只是冰山一角。還有一打的UI Widgets可以供調(diào)用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。請(qǐng)參閱API文檔中范例演示。

使用Ajax

在弄好一些頁(yè)面后，你已經(jīng)懂得在頁(yè)面和腳本之間的控制原理（interact）。接下來(lái)，你想知道的是，怎樣與后臺(tái)服務(wù)器（remoteserver）交換數(shù)據(jù)，常見(jiàn)的是從數(shù)據(jù)庫(kù)加載數(shù)據(jù)（load）或是保存數(shù)據(jù)（save）到數(shù)據(jù)庫(kù)中。通過(guò)JavaScript異步無(wú)刷新交換數(shù)據(jù)的這種方式，就是所謂的Ajax。Ext內(nèi)建卓越的Ajax支持，例如，一個(gè)普遍的用戶操作就是，異步發(fā)送一些東西到服務(wù)器，然后，UI元素根據(jù)回應(yīng)（Response）作出更新。這是一個(gè)包含textinput的表單，一個(gè)div用于顯示消息（注意，你可以在ExtStart.html中加入下列代碼，但這必須要訪問(wèn)服務(wù)器）：

接著，我們加入這些處理交換數(shù)據(jù)的JavaScript代碼到文件ExtStart.js中(用下面的代碼覆蓋)：

Ext.onReady(function(){

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

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

msg.load({

url: [server url], //換成你的URL

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

text: "Updating..."

});

msg.show();

});

這種模式看起來(lái)已經(jīng)比較熟悉了吧！先獲取按鈕元素，加入單擊事件的監(jiān)聽(tīng)。在事件處理器中（eventhandler），我們使用一個(gè)負(fù)責(zé)處理Ajax請(qǐng)求、接受響應(yīng)（Response）和更新另一個(gè)元素的Ext內(nèi)建類，稱作UpdateManager。UpdateManager可以直接使用，或者和我們現(xiàn)在的做法一樣，通過(guò)Element的load方法來(lái)訪問(wèn)（本例中該元素是“msg“的div）。當(dāng)使用Element.load方法，請(qǐng)求（request)會(huì)被加工處理后發(fā)送，等待服務(wù)器的響應(yīng)（Response），來(lái)自動(dòng)替換元素的innerHTML。簡(jiǎn)單傳入服務(wù)器url地址，加上字符串參數(shù)，便可以處理這個(gè)請(qǐng)求（本例中，參數(shù)值來(lái)自“name”元素的value),而text值就是請(qǐng)求發(fā)送時(shí)提示的文本，完畢后顯示那個(gè)msg的div（因?yàn)殚_(kāi)始時(shí)默認(rèn)隱藏）。當(dāng)然，和大多數(shù)Ext組件一樣，UpdateManager有許多的參數(shù)可選，不同的Ajax請(qǐng)求有不同的方案。而這里僅演示最簡(jiǎn)單的那種。

PHP

<? if(isset($_GET['name'])) {

echo 'From Server: '.$_GET['name'];

}

ASP.NET

protected void Page_Load(object sender, EventArgs e)

{

if (Request["name"] != null)

{

Response.Write("From Server: " + Request["name"]);

Response.End();

}

最后一個(gè)關(guān)于Ajax神秘的地方就是，服務(wù)器實(shí)際處理請(qǐng)求和返回（Resposne）是具體過(guò)程。這個(gè)過(guò)程會(huì)是一個(gè)服務(wù)端頁(yè)面，一個(gè)Servlet，一個(gè)Http處理器，一個(gè)WebService,甚至是Perl或CGI腳本，即任何一個(gè)服務(wù)器都可以處理http請(qǐng)求。無(wú)法預(yù)料的是，服務(wù)器返回什么是服務(wù)器的事情，無(wú)法給一個(gè)標(biāo)準(zhǔn)的例子來(lái)覆蓋所有的可能性。(這段代碼輸出剛才我們傳入'name'的那個(gè)值到客戶端，即發(fā)送什么，返回什么）。

使用Ajax的真正挑戰(zhàn)，是需經(jīng)過(guò)適當(dāng)處理過(guò)的手工代碼，并相應(yīng)格式化為服務(wù)端可用接受的數(shù)據(jù)結(jié)構(gòu)。有幾種格式供人們選擇（最常用為JSON/XML)。正因Ext是一種與服務(wù)器中立的語(yǔ)言，使得其它特定語(yǔ)言的庫(kù)亦可用于Ext處理Ajax服務(wù)。只要頁(yè)面接受到結(jié)果是合適的數(shù)據(jù)格式，Ext絕不會(huì)過(guò)問(wèn)服務(wù)器的事情！要全面討論這個(gè)問(wèn)題，已超出本文的范圍。推薦正在使用Ajax的您，深入閱讀Ext Ajax教程。

下一步是？
現(xiàn)在你已經(jīng)一睹Ext的芳容，知道她大概能做些什么了。下面的資源有助您進(jìn)一步窺見(jiàn)其全貌：

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

超COOL好用的Ext!!(教程)