บทความแรกนี้จะกล่าวถึงการติดตั้ง Ext JS เพื่อใช้กับกับเว็บไซต์นะครับ มีขึ้นตอนดังนี้
1. เริ่มจากการไปดาวน์โหลดไฟล์ที่เว็บไซต์ extjs ในบทความนี้ใช้ Version 2.1 นะครับ หรือหากท่านจะใช้ Version อื่นก็ได้นะครับ เพราะช่วงนี้เห็นมี Version 2.2 ออกมาแล้ว แต่การใช้งานก็ไม่ได้แตกต่างกันเท่าไหร่ครับ ส่วน Version 1 ผมจะไม่ขอกล่าวถึง การติดตั้งนั้นก็เหมือนกับการติดตั้ง JavaScript ทั่วๆไปนะครับ
2. เมื่อดาวน์โหลดมาแล้วจะได้ไฟล์ ext-2.1.zip มาให้ทำการ unzip ไฟล์ออกมาเป็นโฟลเดอร์ ext-2.1 ผมขอเปลี่ยนชื่อโฟลเดอร์เป็น ext21 ละกันนะครับ หรือชื่ออื่นก็ได้ตามสะดวกครับ
3. การวางไดเร็กทอรี่ของเว็บในตัวอย่างทุกบทความที่เกี่ยวกับ extjs ผมขอทำความเข้าใจดังนี้ครับ คือวางโฟลเดอร์ ext21 ใช้ที่รูทไดเร็กทอรี่เลยนะครับ ดังตัวอย่างด้านล่างนี้ครับ
htdocs (ไดเร็กทอรี่หลักของเว็บไซต์)
|- ext21 (เก็บไฟล์ของ extJS)
|- js (เก็บไฟล์ JavaScript)
|- css (เก็บ Style sheet)
|- images (เก็บรูปภาพเพื่อใช้กับ Style sheet)
|- index.php ไฟล์ index ของเว็บไซต์
4. จากนั้นสร้างไฟล์ index.php หรือไฟล์ที่ต้องการติดตั้ง ExtJS แล้วพิมพ์โค้ดลงไปดังตัวอย่างด้านล่างนี้ครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Forms</title> <link rel="stylesheet" type="text/css" href="ext21/resources/css/ext-all.css"/> <script type="text/javascript" src="ext21/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext21/ext-all.js"></script> </head> <body> </body> </html>
แค่นี้ท่านก็สามารถใช้งาน ExtJS ได้แล้วครับ
คำแนะนำ : เว็บเพ็จผมขอเลือกใช้ encoding เป็น utf-8 นะครับ เนื่องจาก ExtJS ส่ง-รับ ข้อมูลกับ Server โดยใช้ utf-8 แต่หากท่านใดจะใช้ tis-620 ก็ได้ แต่เวลาเขียนโค้ด PHP ท่านต้องแปลง charset เอาเองครับ ทุกตัวอย่างผมจะใช้ uft-8 นะครับ ขอทำความเข้าใช้ไว้ดังนี้