From Learn About the Ext JavaScript Library

บทเรียนนี้เป็นบทเรียนสำหรับ Ext เวอร์ชั่น 2.0. บทเรียน เวอร์ชั่น 1.x ยังคงมีอยู่.

ใครที่เป็นมือใหม่ในการใช้ไลบราลี่ Ext หรือพยายามที่จะเรียนรู้เกี่ยวกับมันมากขึ้น ได้มายังที่ที่ถูกต้อง. บทเรียนนี้จะแสดงสรุปขั้นพื้นฐานของทุกๆ บท และวิธีที่จะทำให้เว็บเพจแบบ dynamic สามารถทำงานได้อย่างรวดเร็ว. บทเรียนนี้ได้ตั้งสมมติฐานว่าผู้อ่านมีประสบการณ์เกี่ยวกับ Javascript และ เข้าใจพื้นฐานของ Html document object model (DOM).

การติดตั้ง Ext

ถ้าคุณยังไม่ได้ติดตั้ง, เริ่มต้นคุณควรจะไปติดตั้ง Ext. อ่านรายละเอียดเพิ่มเติมที่ Start Up Guide

เริ่มต้นใช้งาน

ดาวน์โหลดไฟล์ตัวอย่าง IntroToExt2.zip

เรากำลังแสดงขั้นตอนของงานพื้นฐานส่วนใหญ่เกี่ยวกับ Javascript ที่ผู้เขียนโปรแกรมจะต้องทำ และวิธีที่จะเปลี่ยนไปปฎิบัติการกับมันด้วย Ext. ถ้าคุณอยากจะทดลองโค้ดของบทเรียนนี้, คุณควรจะดาวน์โหลดไฟล์เริ่มต้นใน IntroToExt2.zip ซึ่งเราจะใช้เพื่อสร้างหน้าเว็บเพจที่ใช้งานโค้ด Ext.

ไฟล์ zip บรรจุทั้งหมด 4 ไฟล์: ExtStart.html, ExtStart.js, ExtStart.css และ ajax-example.php.

• แตกไฟล์ทั้ง 4 ไฟล์ลงในโฟล์เดอร์โดยตรงภายใต้โฟลเดอร์ที่ Ext ถูกติดตั้ง (ตัวอย่างเช่น, ถ้า Ext อยู่ที่ "C:\code\ext-2.0\," สร้างโฟล์เดอร์ใหม่ข้างใน "ext-2.0\" ให้ชื่อว่า "tutorial" ซึ่งจะได้เป็นโฟลเดอร์. "C:\code\ext-2.0\tutorial\").
• ดับเบิ้ลคลิ้กที่ ExtStart.html มันจะแสดงผลบน web browser ปกติของระบบ, และคุณควรจะอ่านเจอข้อความที่บอกคุณว่าทุกๆ อย่างได้ถูกตั้งค่าคอนฟิกอย่างถูกต้อง. ถ้าคุณได้รับข้อความผิดพลาดเกี่ยวกับ Javascript , โปรดปฏิบัติตามคำแนะนำบนหน้าดังกล่าวเพื่อแก้ไขให้มันทำงานได้.

ขณะนี้คุณพร้อมที่จะเปิด ExtStart.js ใน IDE หรือ text editor ที่คุณถนัด และดูที่:

Ext.onReady(function() {
	alert("Congratulations!  You have Ext configured correctly!");
});

Ext.onReady อาจจะเป็น method แรกที่คุณจะใช้ในทุกๆ หน้า. method นี้ถูกเรียกโดยอัตโนมัติครั้งหนึ่งเมื่อ DOM ทั้งหมดถูกโหลดมาเรียบร้อยแล้ว, จะรับประกันได้ว่าขณะที่ script ทำงานใน method นี้ทุกๆ elements ซึ่งคุณต้องการจะอ้างอิงนั้นได้ถูกสร้างขึ้นมาแล้ว. คุณอาจจะไปและลบบรรทัดที่มีข้อความ alert() จากนั้นเราสามารถเริ่มต้นเพิ่มโค้ดจริงๆ บางอย่างซึ่งทำงานที่มีประโยชน์จริงๆ!

Element: หัวใจของ Ext

เกือบจะทุกๆ ในทุกอย่างที่คุณทำใน javascript จะต้องการตำแหน่งบางอย่างรวมทั้งการอ้างอิงถึง elements ที่เฉพาะเจาะจงในเว็บเพจของคุณ จากนั้นคุณก็จะสามารถทำสิ่งต่างๆ กับ elements นั้นได้. การใช้ Javascript แบบดั้งเดิม, การจะเลือกโหนด DOM โดยใช้ ID จะทำดังนี้:

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

ซึ่งทำงานได้ดี, แต่ object ซึ่งคืนกลับมาให้ (โหนด DOM) ไม่ได้จัดสรรความสามารถและความสะดวกสบายไว้มากนัก. ในการจะทำประโยชน์ต่างๆกันโหนดนั้น, คุณจะต้องเขียนโค้ดที่ต้องอาศัยความเข้าใจอย่างลึกซึ้งที่มีการปรับแต่งด้วยตัวคุณเองเป็นจำนวนมาก. บวกกับเป็นความรับผิดชอบของคุณที่จะจัดการให้สามารถใช้งานโหนดได้ในแต่ละ browser ได้อย่างไร. ซึ่งทำให้ดูเป็นสิ่งที่น่ากลัว.

เข้าสู่เรื่องออบเจค Ext.Element. Element เป็นหัวใจของ Ext เนื่องจากเป็นงานที่คุณทำเป็นส่วนใหญ่ ซึ่งรวมถึงการเข้าถึง Elements และปฏิบัติงานต่างๆ กับมัน. Element API คือรากฐานของไลบราลี Ext ทั้งหมด, และถ้าคุณใช้เวลาที่จะเรียนเพียงแค่ class หนึ่งอย่างจริงๆ จังๆ ใน Ext, คลาสที่ได้รับการถูกเลือกควรจะเป็น Element!

โค้ดที่รับผิดชอบในการคืนค่า Ext Element โดยใช้ ID มีลักษณะเหมือนอย่างนี้ (หน้าเริ่มต้น ExtStart.html บรรจุ div ซึ่งมี id "myDiv," ขั้นต่อไปให้เพิ่มโค้ดนี้ไปที่ไฟล์ ExtStart.js):

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

เราได้รับออบเจค Element แล้วในตอนนี้-มันมีอะไรที่น่าสนใจบ้าง?

• Element รวมเอา property และ method ของ DOM ส่วนใหญ่ซึ่งคุณจำเป็นต้องใช้เอาไว้ , จัดหาส่วนประสานการทำงานของ DOM ซึ่ง cross-browser, เป็นหนึ่งเดียว อีกทั้งสะดวกสบาย (เมื่อจำเป็น คุณยังคงสามารถเข้าถึงโหนด DOM ที่ต้องการได้โดยตรงผ่านทาง Element.dom)
• เมธอด Element.get() จัดหา internal cache ไว้ให้, ดังนั้นการเรียกใช้ object เดิมๆ หลายๆ ครั้งจึงเร็วอย่างไม่น่าเชื่อ
• การทำงานผ่านทาง DOM นั้นถูกสร้างขึ้นจากเมธอด ของ Element ที่ cross-browser และตรงไปตรงมา (เพิ่ม/ลบ คลาส CSS, เพิ่ม/ลบตัวจัดการ event, จัดตำแหน่ง, จัดขนาด, อนิเมชั่น, ลาก/วาง, อื่นๆ)

นี่หมายความว่าคุณสามารถสร้างผลงานได้ทุกประเภท ด้วยการเขียนโค้ดที่น้อยที่สุด. นี่เป็นเพียงแค่ตัวอย่างที่เรียบง่าย (ดูรายการทุกอย่างที่คุณสามารถทำได้ที่ Element API documentation) พยายามเพิ่มโค้ดดังกล่าวไปยัง ExtStart.js หลังจากบรรทัดของคำสั่งที่เราได้รับ element 'myDiv':

myDiv.highlight();      // พื้นหลังของอิลิเม้นท์จะถูกไฮท์ไลท์เป็นสีเหลืองจากนั้นจะกลับมาเป็นสีเดิม
myDiv.addClass('red');  // เพิ่มคลาสที่ปรับแต่งเอง (ที่กำหนดไว้ในไฟล์ ExtStart.css)
myDiv.center();         // จัดอิลิเม้นท์ไว้ตรงกลางของส่วนแสดงผล
myDiv.setOpacity(.25);  // ทำให้อิลิเม้นท์โปร่งใสในระดับ 25%

การเลือกโหนด DOM

บ่อยครั้งที่มันเป็นไปไม่ได้หรือไม่เหมาะในการปฏิบัติที่จะใช้ ID ในการเลือกโหนด DOM. อย่างเช่น ID อาจจะไม่ได้ถูกตั้งไว้. หรือคุณไม่รู้ว่า ID ของมันคืออะไร, หรือมี element มากเกินไปที่จะอ้างอิงโดยใช้ ID โดยตรง. บางครั้งคุณอาจจะต้องการทางเลือกอื่นมากกว่าการใช้ ID, อย่างเช่น attribute หรือชื่อคลาส CSS. ด้วยเหตุผลนี้, Ext มาพร้อมกับไลบราลี่ DOM Selector ที่มีความสามารถสูงมากที่มีชื่อว่า DomQuery

DomQuery สามารถนำไปใช้เป็นไลบราลี่โดยไม่ต้องใช้ร่วมกับไลบราลี่อื่น, แต่บ่อยครั้งในการใช้ Ext, ที่คุณจะใช้มันในการเลือก Elements ดังนั้นคุณสามารถใช้มันผ่านทาง Element interface. โชคดีที่ตัวออปเจค Element นั้นสนับสนุน การ query ผ่านทางเมธอด Element.select, ซึ่งมันใช้ Domquery ในการเลือก element. และตัวอย่างง่ายๆ ที่จะแสดงให้เห็นว่าเราจะใช้งานมันได้อย่างไร, ไฟล์ ExtStart.html บรรจุหลายย่อหน้า (แท็ก <p>), ซึ่งไม่มีแท็กไหนมี id, ถ้าคุณต้องการเลือกทุกๆ ย่อหน้าและปฎิบัติงานกับทุกๆ ย่อหน้าภายในครั้งเดียว, คุณสามารถทำดังนี้:

// ไฮไลท์ทุกๆ ย่อหน้า
Ext.select('p').highlight();

ตัวอย่างนี้แสดงให้เห็นถึงลักษณะการใช้ที่สะดวกสบายของ Element.select - มัน คืนค่า CompositeElement, ซึ่งทำให้สามารถเข้าถึงทุกๆ Element ที่ได้เลือกเอาไว้ผ่านทาง Element interface. ซึ่งอนุญาตให้คุณปฎิบัติงานบนทุกๆ Element instance ที่คืนค่ากลับมาทาง Element.select โดยไม่จำเป็นต้องเขียนคำสั่งวนซ้ำในการที่จะเข้าไปปฎิบัติการกับแต่ละอิลิเมนท์อย่างเฉพาะเจาะจง.

DomQuery สนับสนุนทางเลือกในการ select อย่างมากมาย, รวมทั้ง W3C CSS3 DOM selector ส่วนใหญ่, XPath ขั้นพื้นฐาน, HTML attribute และอื่นๆ อีกมากมาย. โปรดอ่านรายละเอียดที่สมบูรณ์ของไลบราลี่ที่มีความสามารถสูงนี้ได้ที่ DomQuery API documentation

การโต้ตอบกับ Events

ตัวอย่างของเราจนถึงตอนนี้, ทุกๆ โค้ดเราเขียนอยู่ฟังค์ชั่น onReady, ซึ่งหมายความว่า มันจะถูกประมวลผลทันที่ที่เว็บเพจถูกโหลด, นี่ไม่ได้ให้การควบคุมแก่เรามากเท่าไหร่, ส่วนใหญ่คุณจะต้องการให้โค้ดประมวลผลตอบสนองต่องานหรือเหตุการณ์ที่เฉพาะเจาะจงที่คุณต้องการควบคุม. ในการกระทำการนี้, ให้กำหนด function ที่ต้องการใช้เป็นตัวจัดการ event.

เริ่มต้นด้วยตัวอย่างที่ง่ายๆ. เปิดไฟล์ ExtStart.js และแก้ไขให้เป็นดังนี้

Ext.onReady(function() {
    Ext.get('myButton').on('click', function(){
        alert("You clicked the button");
    });
});

โค้ดของคุณยังคงประมวลผลเมื่อเว็บเพจถูกโหลดครบสมบูรณ์, แต่มีความแตกต่างที่สำคัญ. ฟังค์ชั่นที่บรรจุ alert() ถูกประกาศขึ้น, แต่มันยังไม่ถูกประมวลผลในทันที-มันถูกกำหนดให้เป็นตัวจัดการกับเหตุการณ์ 'button click'. ถ้าจะพูดกันในภาษาพูด, โค้ดนี้จะอ่านว่า "นำเอา id 'myButton' ใช้ในการดึงเอาตัวอ้างอิงถึง Element และประกาศฟังค์ชั่นที่ต้องการให้ทำงานทุกครั้งเมื่อ Element ดังกล่าว ถูก click ที่."

ปกติ, คุณสามารถใช้ Element.select ทำแบบเดียวกันกับ Element.get, แต่ภายในครั้งเดียวก็สามารถจะปฎิบัติกับ Element ทั้งกลุ่ม. ตัวอย่างเช่น, เราต้องการแสดงข้อความเมื่อ บาง ย่อหน้าในเว็บเพจที่เราใช้ทดสอบนั้นถูก click, เราสามารถทำได้ดังนี้:

Ext.onReady(function() {
	Ext.select('p').on('click', function() {
		alert("You clicked a paragraph");
	});
});

ในตัวอย่างสองตัวอย่างด้านบน, ฟังค์ชั่นที่ใช้จัดการกับ event นั้นประกาศง่ายๆ, โดยไม่ได้กำหนดชื่อฟังค์ชั่น. เราเรียกประเภทของฟังค์ชั่นนี้ว่า "anonymous function" เนื่องจากมันถูกประกาศแต่โดยไม่ได้ตั้งชื่อไว้. คุณสามารถกำหนดฟังค์ชั่นให้กับ event ที่ต้องการจัดการโดยใช้ชื่อ function, ซึ่งจะมีประโยชน์ถ้าคุณต้องการใช้ function หลายครั้งและต้องการใช้มันในการจัดการกับหลายๆ event. ตัวอย่างเช่น, โค้ดนี้ทำงานเหมือนกับตัวอย่างก่อน:

Ext.onReady(function() {
    var paragraphClicked = function() {
      alert("You clicked a paragraph");
    }
    Ext.select('p').on('click', paragraphClicked);
});

ในตอนนี้เราได้ดูที่การปฏิบัติการงานทั่วๆ ไปเมื่อเกิด event ขึ้น, แต่เราจะรู้ได้อย่างไรว่า Element ใดเป็นผู้ที่ทำให้เกิด event ขึ้น เพื่อที่เราจะได้สามารถปฎิบัติการกับมัน? วิธีแก้ปัญหาเป็นเรื่องง่าย-เมธอด Element.on มี parameter อยู่สามตัวที่ส่งไปให้กับฟังค์ชั่นที่ใช้จัดการ (handling function) (เราจะดูแค่ที่ parameter แรก, แต่คุณสามารถค้นหาใน เอกสาร API เพื่อเรียนรู้รายละเอียดในการจัดการกับ event). ในตัวอย่างก่อนของเรา ฟังค์ชั่นที่ใช้จัดการของเรา เพิกเฉยต่อ parameter เหล่านั้น, แต่การเปลี่ยนแปลงเพียงเล็กน้อย, เราสามารถทำให้เกิดประโยชน์ในการใช้งานเพิ่มขึ้นอีกระดับหนึ่ง. parameter ตัวแรก, ซึ่งสำคัญที่สุด คือ event ซึ่งเกิดขึ้น. ซึ่งแท้ทีจริงคือ Ext.EventObject, ซึ่งมันทั้งทำให้ event ของ browser เรียบง่ายขึ้นและยังให้รายละเอียดที่มากกว่า. ตัวอย่างเช่น, เราจะได้รับ event ของโหนด DOM ที่เป็นเป้าหมายด้วยการแก้ไขง่ายๆ นี้:

Ext.onReady(function() {
	var paragraphClicked = function(e) {
		Ext.get(e.target).highlight();
	}
	Ext.select('p').on('click', paragraphClicked);
});

สังเกตว่า e.target คือโหนด DOM, ดังนั้นในตอนแรกเราได้รับ Element ซึ่งเกี่ยวข้องกับ event, จากนั้นเราก็จะให้มันปฎิบัติการอะไรก็ได้ตามที่ต้องการ. ในกรณีนี้, เราไฮไลท์ย่อหน้า.

การส่งค่า Arguments ให้แก่ Event Handlers

นี่คือตัวอย่างแบบย่อที่จะแสดงถึงวิธีที่จะส่ง arguments ไปให้กับฟังค์ชั่นจัดการ event โดยใช้ createDelegate:

var someHandler = function(evt,t,o,myArg1,myArg2,myArg3) {
        //คำสั่งต่างๆ
}
Ext.select('.notice-type1').addListener('click', someHandler.createDelegate(this, [4,'pizza',11], true));
Ext.select('.notice-type2').addListener('click', someHandler.createDelegate(this, [7,'stuff',12], true));

ฟังค์ชั่น someHandler จะถูกเรียกด้วย arguments ดังต่อไปนี้:

evt, t, o

arguments เหล่านี้จะถูกส่งไปยังฟังค์ชั่น event hanlder ตามปกติ.

ได้แก่ : EventObject อธิบายถึง event, Element ซึ่งเกี่ยวข้องกับ event, และทางออบเจคทางเลือกที่มาจากการเรียกเมธอด addListener. สำหรับรายละเอียดอ่านที่ addListener. คุณสามารถกำหนดตำแหน่ง breakpoint ใน Firebug (โปรแกรมเสริมของเบราเซอร์ Firefox) เพื่อตรวจสอบออบเจคเหล่านั้นและดูว่ามันบรรจุสิ่งที่มีประโยชน์อะไรบ้าง.

myArg1, myArg2, myArg3

คือ arguments ที่คุณปรับแต่งเองกำหนดโดย array ซึ่งส่งผ่านทาง argument ที่สองของฟังค์ชั่น createDelegate. ในกรณีนี้เราได้ส่ง 4,'pizza',11 ให้กับทุกๆ element ที่เป็นคลาส "notice-type1" และส่ง 7,'stuff',12 ให้กับทุกๆ elements ที่เป็นคลาส "notice-type2".

ถ้าคุณต้องการเพียงแค่ส่ง arguments ที่เพิ่มเองให้กับฟังค์ชั่นจัดการ event (event handler) และคุณไม่ต้องการเข้าถึง element ซึ่งเป็นผู้ทำให้เกิด event อาจจะดีกว่าถ้าใช้เพียงแค่ createCallback.

อ่านรายละเอียดได้ที่ addListener และ Function.

การใช้งาน Widgets

เพิ่มเติมจากส่วนหลักของไลบราลี่ซึ่งได้พูดถึงไปแล้ว, Ext ได้รวมเอากลุ่มของ Javascript UI widget ที่ได้ถูกใช้กันอย่างแพร่หลายในปัจจุบัน. ซึ่งการอธิบายถึงพวกมันไม่ได้อยู่ในการส่วนของการแนะนำขั้นพื้นฐานนี้, อย่างไรก็ตามมาลองดูที่ widget สักคู่หนึ่งซึ่งนิยมใช้งานกันมากที่สุดและดูว่าเราสามารถใช้งานมันได้ง่ายเพียงไร.

MessageBox

แทนการใช้กล่องข้อความ "Hello World" ที่น่าเบื่อ, มาใส่เทคนิคเพิ่มสักหน่อย. เรามีโค้ดที่เราเขียนใน section ก่อนแล้วซึ่งเมื่อคุณคลิ้กที่ย่อหน้ามันจะถูกไฮไลท์. ลองแก้ไขโค้ดเพื่อให้เมื่อคลิ้กที่ย่อหน้ามันจะแสดงข้อความของย่อหน้าในกล่องข้อความด้วย. ในฟังค์ชั่น paragraphClicked ข้างบน, ให้แทนที่บรรทัด:

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

มีแนวคิดใหม่สองอย่างที่แสดงที่นี่ที่น่าจะกล่าวถึง. ในบรรทัดแรก,เราสร้างตัวแปร local ที่ชื่อว่า paragraph ซึ่งจะอ้างอิงถึง Element ที่เป็นตัวแทนของโหนด DOM ซึ่งถูกคลิ้ก (ในกรณีนี้เรารู้ว่ามันจะต้องเป็นย่อหน้าเสมอเนื่องจาก event click ของเราเชื่อมกับแท็ก <p>). ทำไมเราจึงทำอย่างนี้? ใช่แล้ว, ดูที่คำสั่งด้านล่าง, เราจำเป็นต้องอ้างอึง Element เพื่อไฮไลท์มัน, และเราจะต้องใช้ Element เดิม เพื่อเป็นหนึ่งใน parameter ของ MessageBox. โดยทั่วไป, มันไม่ใช่วิธีปฎิบัติที่ดีที่จะที่จะเรียกฟังค์ชั่นในการรับเอาค่าหรือค่าตัวอ้างอิงออบเจคเดิมหลายๆ ครั้ง, ดังนั้นโดยการกำหนดค่าให้กับตัวแปร local และใช้ตัวแปรซ้ำอีกครั้ง, นับได้ว่าเรากำลังเป็นนักพัฒนาโปรแกรมเชิงออบเจคที่ดี!

ในตอนนี้, ที่คำสั่ง MessageBox, แสดงให้เห็นแนวความคิดใหม่ที่เราจะพูดถึง. ถ้ามองผ่านๆ, จะดูเรียบง่ายเหมือนกับรายการของ parameter ที่จะส่งไปให้กับเมธอด, แต่ถ้าคุณดูเข้าไปให้ใกล้มากขึ้น, จะเห็นว่ามันเป็นไวยากรณ์ที่เฉพาะเจาะจง. มี parameter อะไรกันแน่ที่ถูกส่งให้กับ MessageBox.show() ในกรณีนี้มีเพียงแค่หนึ่ง parameter: ออปเจคตามตัวอักษร (object literal) ซึ่งบรรจุด้วย properties และ values ต่างๆ. ใน Javascript, ออบเจคตามตัวอักษรนั้นเป็นออบเจคทั่วไปแบบไดนามิค, ที่ถูกสร้างขึ้นทุกครั้งที่คุณใช้เครื่องหมาย { และ } ร้อมลอบรายการ property, และรูปแบบของ properties คือ [property name] : [property value]. ดังนั้นคุณจะเห็นรูปแบบนี้ถูกใช้อย่างกว้างขวางใน Ext, คุณจึงควรจะทำความรู้จักกับมันให้ดี!

ทำไมถึงใช้ออบเจคตามตัวอักษร? เหตุผลหลักคือมันสามารถใช้งานได้อย่างยืดหยุ่น. property ใหม่ๆ สามารถเพิ่มหรือเอาออกจาก object literal เมื่อไหร่ก็ได้, หรือกำหนดในลำดับไหนก็ได้, ขณะที่ signature ของเมธอด (จำนวนและชนิดของ parameter ที่เมธอดต้องการ) ไม่สามารถจะเปลี่ยนแปลงได้. มันทำให้เกิดความสะดวกสบายกับผู้พัฒนาที่เรียกใช้เมธอดเมื่อเมธอดที่มี parameter ทางเลือกจำนวนมาก (ตัวอย่างเช่น MessageBox.show). ตัวอย่าง, สมบติว่าเมธอด foo.action มี parameter ทางเลือก, แต่คุณต้องการเพียงแค่ส่งไปเพียงแค่หนึ่งตัว, ในการณีนี้, โค้ดของคุณอาจจะเขียนได้ดังนี้: foo.action(null, null, null, 'hello'). อย่างไรก็ตาม, ถ้าเมธอดนั้นเปลี่ยนมาใช้ object literal, จะเขียนโค้ดได้เป็นดังนี้: foo.action({ para4: 'hello' }). ซึ่งใช้งานได้ง่ายกว่า, และอ่านเข้าใจได้ง่ายกว่าอีกด้วย.

Grid

gird เป็นหนึ่งใน widget ที่มีการนิยมใช้มากที่สุด, และปกติเป็นสิ่งแรกที่โปรแกรมเมอร์ต้องการใช้, ดังนั้นมาดูว่ามันง่ายเพียงไรในการสร้างและใช้งาน grid ขั้นพื้นฐาน. แทนที่โค้ดทั้งหมดในไฟล์ ExtStart.js ดังนั้นในไฟล์ ExtStart.js จะมีข้อมูลดังนี้:

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 myReader = new Ext.data.ArrayReader({}, [
		{name: 'company'},
		{name: 'price', type: 'float'},
		{name: 'change', type: 'float'},
		{name: 'pctChange', type: 'float'},
		{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
	]);
 
	var grid = new Ext.grid.GridPanel({
		store: new Ext.data.Store({
			data: myData,
			reader: myReader
		}),
		columns: [
			{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'}
		],
		viewConfig: {
			forceFit: true
		},
		renderTo: 'content',
		title: 'My First Grid',
		width: 500,
		autoHeight: true,
		frame: true
	});
 
	grid.getSelectionModel().selectFirstRow();
});

แม้ว่ามันจะดูเหมือนมีคำสั่งจำนวนมาก, จริงๆ แล้วมันมีเพียงแค่ โค้ด 4 บรรทัด (3 บรรทัด ถ้าไม่นับข้อมูลทดสอบ)!

• บรรทัดแรก สร้าง array ของข้อมูบทดสอบที่จะแสดงบน grid. ในโปรเจคจริง, เป็นไปได้ที่คุณจะโหลดข้อมูลจากแหล่งทรัพยาการที่เป็นแบบ dynamic อย่างเช่น database หรือ web service.
• บรรทัดถัดไป, เราสร้าง data reader ซึ่งสามารถเข้าใจข้อมูลและแปลงมันให้อยู่ในรูปแบบ record สำหรับใช้เป็นคลังข้อมูล (data store) ของ grid, มีคลาส Reader หลากหลายชนิด ซึ่งจะนำมาใช้กับชนิดข้อมูลต่างๆ กันไป.
• ถัดมา, เราสร้าง widget ของ grid, ส่งค่า config ทั้งหมด, รวมทั้ง:
  • คลังข้อมูล, ที่ได้รับการปรับ config กลางอากาศด้วยข้อมูลทดสอบและ reader ของเรา
  • การกำหนดค่าให้กับตัวแบบ column โดยใช้ โครงสร้าง columns
  • ทางเลือกเพิ่มเติมในการสร้างคุณลักษณะที่เฉพาะเจาะจงให้แก่ grid
• ท้ายสุด, เราบอกให้ไฮไลท์ grid ที่บรรทัดแรก ผ่านทาง SelectionModel.

รู้สึกว่าง่ายอะไรขนาดนี้ใช่ไหม? ถ้าทุกอย่างไปได้ด้วยดี, คุณจะได้พบกับสิ่งที่คล้ายๆ กับภาพข้างล่างนี้:

แน่นอน, ในตอนนี้อาจจะมีบางรายละเอียดในโค้ดนี้ซึ่งคุณยังไม่เข้าใจอย่างสมบูรณ์. จุดมุ่งหมายของตัวอย่างนี้เพื่อแสดงให้เห็นว่าจะสามารถสร้าง ส่วนประสานผู้ใช้เสมือนจริงซึ่งมีความซับซ้อนและเต็มไปด้วยอรรถประโยชน์อย่างสุดยอด ด้วยโค้ดไม่กี่บรรทัดได้อย่างไร-การเรียนรู้ถึงรายละเอียดจะคงค้างไว้ให้เป็นแบบฝึกหัดให้แก่ผู้อ่าน. มีแหล่งทรัพยาการที่จะช่วยให้คุณเรียนรู้เกี่ยวกับ grid, รวมอยู่ใน interactive grid demos และ GridPanel API documentation.

และอื่นๆ อีกมากมาย...

เราเพิ่งจะได้เห็นจุดปลายของภูเขาน้ำแข็งที่นี่. มี UI widget อีกเป็นโหลที่สามารถเลือกใช้ได้จาก Ext, รวมทั้ง page layouts, tabs, menus, dialogs, tree view และอื่นๆ อีกมากมาย. โปรดสำรวจหาทุกๆ widget ที่ Ext มีได้ที่ interactive examples.

การใช้งาน Ajax

ในครั้งแรกที่คุณสร้างเว็บเพจและรู้ว่าจะปฎิบัติกับมันอย่างไรผ่านทาง Javascript, คุณจะต้องการที่จะรู้ว่าจะบันทึกข้อมูลและรับข้อมูลจาก remote server ได้อย่างไร, เป็นเรื่องปกติมากที่จะโหลดหรือเซฟข้อมูลจาก database ที่อยู่ใน server. การโหลดและเซฟข้อมูลอย่างไม่อย่างไม่ดำเนินไปตามจังหวะ (asynchronously) โดยทาง Javascript โดยไม่มีการโหลดหน้านั้นใหม่เรียกว่า Ajax, และ Ext มีการสนับสนุน Ajax รวมอยู่ด้วย. สำหรับตัวอย่าง, เป้าหมายปกติคือจัดการกับส่วนโต้ตอบกับผู้ใช้, การส่งข้อมูลบางอย่างให้กับ server อย่างไม่ดำเนินไปตามจังหวะ, จากนั้นเพื่อเป็นการตอบสนองกับการทำงานก็จะเปลี่ยนแปลงข้อมูลใน element ของ UI. นี่คือตัวอย่างของแบบฟอร์มกรอกข้อมูลแบบ HTML ซึ่งบรรจุ ช่องกรอกข้อมูล text, ปุ่ม, และแท็ก div ที่จะใช้แสดงข้อความ (โน๊ต: คุณสามารถเพิ่มโค้ดนี้ให้กับ ExtStart.html ถ้าคุณต้องการจะทำตาม, แต่ในการที่จะให้โค้ดด้านล่างนี้สามารถทำงานได้ คุณจะต้องมีสิทธิในการเข้าถึง web server):

<div>
    Name: <input type="text" id="name" />
    <input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>

ถัดไป, คุณจะต้องเพิ่ม Javascript ที่จำเป็นในการดึงและส่งข้อมูลไปยัง process ที่ทำงานอยู่บน server (แทนที่โค้ดที่อยู่ในไฟล์ ExtStart.js ด้วยโค้ดต่อไปนี้):

Ext.onReady(function(){
	Ext.get('okButton').on('click', function(){
		var msg = Ext.get('msg');
		msg.load({
			url: 'ajax-example.php', // <-- เปลี่ยนเป็นไฟล์ที่ใช้รับข้อมูลจากแบบฟอร์ม
			params: 'name=' + Ext.get('name').dom.value,
			text: 'Updating...'
		});
		msg.show();
	});
});

โน๊ต: ตัวอย่างนี้จะทำงานเฉพาะไฟล์ที่อยู่ใน web server เท่านั้น. URL ในเบราเซอร์ของคุณควรจะเริ่มต้นด้วย http:// และไม่ใช่ file:// ไม่อย่างนั้นการดำเนินงานของ Ajax จะไม่เริ่มต้นขึ้น! Ajax จะสามารถทำงานได้ดีใน Localhost, แต่จะต้องผ่านทาง http.

หวังว่ารูปแบบทั่วๆ ไป เริ่มจะเป็นที่คุ้นเคยแล้วในตอนนี้! โค้ดที่ล้อมรอบ okButton ด้วยออบเจค Element และตามด้วย anonymous function ซึ่งจะใช้ในการจัดการกับ event ถ้ามีการคลิ้กที่ปุ่มนั้น. ภายในตัวจัดการกับ event click, เรากำลังใช้คลาสพิเศษที่มีอยู่ใน Ext เรียกว่า Updater—คลาสนี้ช่วยส่งการร้องขอแบบ Ajax, รับคำตอบที่ได้รับจาก server และเปลี่ยนแปลงข้อมูลของ Element. เราสามารถใช้งาน Updater ได้โดยตรง, หรืออย่างเช่นเราทำที่นี่, มันสามารถเข้าถึงผ่านทาง Element ซึ่งเราต้องการจะเปลี่ยนแปลงข้อมูล (ในกรณีนี้ div 'msg') โดยการใช้เมธอด Element.load. เมื่อเราใช้ Element.load, innerHTML ของ Element จะถูกแทนที่ด้วยคำตอบ (response) ที่ได้จาก server. เพียงแค่ส่ง URL ไปให้กับ Updater process ที่ทำงานบน server ก็จะจัดการกับการร้องขอ (request), และส่ง querystring ไปให้กับ process (ในกรณีนี้ส่งค่าของฟิลด์ 'name') และข้อความที่จะให้แสดงใน innerHTML ของ Element ซึ่งที่กำลังดำเนินการการ request. แสดง div 'msg' (เนื่องจากมันถูกซ่อนในตอนเริ่มต้น) ซึ่งสามารถทำได้ง่ายดังนี้!

แน่นอน, ด้วยอุปกรณ์ส่วนใหญ่ใน Ext, มีทางเลือกของ Updater อีกจำนวนมากที่มีการสนับสนุน, และมีทางอื่นที่จะดำเนินการ Ajax request ในสถานการณ์ต่างๆ (คำสั่งที่สามารถเข้าถึงการใช้งาน Ajax ได้โดยตรงสามารถดูได้ที่ Ext.Ajax), อย่างไรก็ตามที่นี่ก็แสดงให้เห็นว่าจะเขียนโค้ดที่สามารถใช้งานได้จริงได้ง่ายเพียงใด.

ตัวต่อจิ้กซอชิ้นสุดท้ายของ Ajax ก็คือ process ที่อยู่บน web server ซึ่งจัดการกับการร้องขอและคือค่าคำตอบกลับไปให้กับเว็บเพจ. process นั้นอาจจะเป็นเว็บเพจที่ server, servlet, HTTP handler, web service, หรือแม้แต่ Perl หรือสคริป CGI-หรืออะไรก็ตามที่สามารถบรรจุอยู่ใน web server และดำเนินการ HTTP requests. โชคไม่ดีนัก, เนื่องจากความที่มันมีความหลากหลายมาก จึงไม่มีตัวอย่างมาตรฐานที่จะครอบคลุมความทุกๆ ความเป็นไปได้. ที่นี่มีตัวอย่างในภาษาที่ใช้กันแพร่หลายด้วยความหวังว่าจะทำให้คุณสามารถเริ่มต้นได้ (โค้ดนี้เพียงแค่แสดงผลอะไรก็ตามที่ส่งจากฟิลด์ 'name' กลับไปยังฝั่ง client พร้อมกับข้อความ 'From server: ' แนบอยู่ด้านหน้า, และนั้นก็จะเขียนลงใน div 'msg'). ตัวอย่างของโค้ด PHP ถูกรวมไว้ในไฟล์ที่ให้ download ในไฟล์ 'ajax-example.php' แต่คุณสามารถจะแทนที่โค้ดใน server ด้วยทางเลือกเหล่านี้:

PHP แบบปกติ

<?php if(isset($_POST['name'])) {
		echo 'From Server: '.$_POST['name'];
	}
?>

CakePHP

<?php if(isset($this->data['name'])) {
		$this->flash('From Server: '.$this->data['name']);
	}
?>

Django

from django.http import HttpResponse
 
def ajax_request(request):
    return HttpResponse('From Server: %s' % request.POST.get('name', 'nada'))

Perl

#!/usr/bin/perl
use strict;
use warnings;
use CGI;
 
my $Query = new CGI;
 
print $Query->header();
print "Hello from : ".$Query->param('name');
 
exit;

ASP.Net

protected void Page_Load(object sender, EventArgs e)
{
	if (Request["name"] != null)
	{
		Response.Write("From Server: " + Request["name"]);
		Response.End();
                //โน๊ต: การเรียกคำสั่ง Response.End() จะโยน exception
                //(ซึ่งมันถูกออกแบบมาให้เป็นอย่างนั้น).
                //เพียงแค่ catch มันแต่ไม่จำเป็นต้องเขียนคำสั่งอะไร;
                //ขึ้นอยู่กับกรณีของคุณ, คุณอาจจะพบว่ามันจำเป็นต้องทำ.
	}
}

ColdFusion

<cfif StructKeyExists(form, "name")>
    <cfoutput>From Server: #form.name#</cfoutput>
</cfif>

    or using ColdFusion Scripting (cfscript)

if (StructKeyExists(form, "name")) {
        writeoutput("From Server : " & form.name);
        }

JSTL (JSP)

From Server: ${param.name}

Ruby on Rails

render :text => "From Server: #{params[name]}"

ความท้าทายในการเข้าไปใช้งาน Ajax จริงๆ คือการเข้าไปจัดการเกี่ยวกับการเขียนโค้ดที่จำเป็นต้องใช้ในการดำเนินการที่ถูกต้อง และจัดรูปแบบโครงสร้างข้อมูลบน server. มีรูปแบบโครงสร้างหลายอย่างที่ได้รับการคัดเลือกมากจากที่มีคนใช้กันแพร่หลาย (ส่วนใหญ่จะใช้ JSON หรือ XML). มีไลบราลี่ที่เฉพาะเจาะจงกับหลายๆ ภาษาโปรแกรมที่ใช้กับการดำเนินงานกับ Ajax ซึ่งสามารถใช้งานได้ดีกับ Ext, เนื่องจาก Ext เป็นภาษาที่ไม่โน้มเอียงในการยึดติดกับ server. ตราบใดที่ผลลัพธ์ที่ถูกส่งมายังเวบเพจอยู่ในรูปแบบที่ถูกต้อง, Ext ไม่สนใจว่ามันจะมีการดำเนินการอะไรเกิดขึ้นที่ server! โปรดอ่านรายการ platform-specific resources ซึ่งได้รวบรวมข้อมูลเกี่ยวกับเครื่องมือและ framework ฝั่ง server.

ควรจะไปที่ไหนต่อ?

ถึงตอนนี้ คุณได้รับประสบการณ์เล็กๆ น้อยๆ ว่า Ext คืออะไรและมันใช้งานอะไรได้บ้าง, มีแหล่งทรัพยากรจำนวนมากที่จะช่วยให้คุณเดินไปสู่ระดับที่สูงขึ้นได้ ยกตัวอย่างเช่น:

• Additional Tutorials
• Interactive Examples
• Ext Programmer's API Documentation
• Ext User Forums