เมื่อดาวน์โหลด ExtJS SDK มาแล้ว เราก็จะมาดูว่าจะเริ่มต้นเขียนเว็บ โดยใช้ ExtJS เราจะต้องเอาไฟล์อะไรมาใช้บ้าง
ไฟล์หลักๆ ที่เราต้อง include จะมี ดังนี้
resources/css/ext-all.css : เป็นที่เอาไว้สำหรับจัดรูปแบบการแสดงผลของ ExtJS widgets ทั้งหมด เราต้อง include ไฟล์นี้ตลอด และเป็นไฟล์ที่เราไม่ควรจะไปแก้ไขมัน ถ้าต้องการจะปรับแต่งเองก็ควรจะสร้างไฟล์ใหม่ขึ้นมา
adapter/ext/ext-base.js : ไฟล์นี้เป็นไฟล์ที่รวบรวมฟังก์ชั่นการทำงานหลักๆของ ExtJS และถ้าเราต้องการใช้งานร่วมกับ library อื่นเราก็สามารถเอา adapter อื่นมาแทนได้ เช่น jQuery เราก็เปลี่ยนไป include adapter/jquery/ext-jquery-adapter.js แทน
ext-all-debug.js/ext-all.js : เป็นไฟล์รวบรวม widgets ทั้งหมดของ ExtJS โดยไฟล์ ext-all-debug.js จะใช้ในระหว่างการพัฒนา และเมื่อพัฒนาเสร็จแล้วควรจะเปลี่ยนเป็น ext-all.js
เราก็จะได้ไฟล์ Html ตามข้างล่างนี้
<!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=iso-8859-1">
<title>Sample ExtJS</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
</head>
<body>
</body>
</html>
คราวนี้ลองมาดูว่าถ้าจะใช้กับ library อื่นจะต้อง include ไฟล์อะไรบ้าง ตอนนี้ผมรวมไฟล์ทั้งหมดไว้ที่โฟลเดอร์ lib
ตัวแรกก็จะเป็น ext-base ของตัว ExtJS
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
ถ้าจะใช้ jQuery ด้วยก็ต้อง include เพิ่ม ดังนี้
<script src="lib/jquery.js"></script>
<script src="lib/jquery-plugins.js"></script>
<script src="lib/extjs/adapter/jquery/ext-jquery-adapter.js"> </script>
และถ้าจะใช้ YUI ด้วยก็ต้อง include เพิ่ม ดังนี้
<script src="lib/utilities.js"></script>
<script src="lib/extjs/adapter/yui/ext-yui-adapter.js"></script>
และสุดท้ายถ้าจะใช้ Prototype และ Effect ของ Scriptaculous ก็ include เพิ่มตามข้างล่างเลยครับ
<script src="lib/prototype.js"></script>
<script src="lib/scriptaculous.js?load=effects"></script>
<script src="lib/extjs/adapter/prototype/ext-prototype-adapter.js"></script>
หลังจากที่ include adapter เรียบร้อยแล้ว เราก็อย่าลืม ext-all.js หรือ ext-all-debug.js นะครับ
