ExtJS ตอนที่ 1 พื้นฐานการเรียกใช้

1. ไปดาวโหลด ExtJS  ที่  http://www.sencha.com

2. แล้ว แตกไฟล์ มาเก็บไว้ใน หน้า เว็บของเรา ผมตั้งชื่อว่า extjs-project

3. เปิดโปรแกรม  NetBeans  แล้วคลิกที่ เมนู  Files > New Project  เลือก PHP Application  แล้ว กด Next

image

4. ตั้งชื่อ โปรเจค ของผมตั้งชื่อ extjs-project  แล้ว ระบุ Sources Folder PATH ของ โปรเจคเรา ที่สร้างไว้ กด ปุ่ม Finish

image

5. สร้างไฟล์ สำหรับ การ Redirect ไปยัง หน้าแรก ระบบ โดย คลิกขวา ที่ Source Files  > New > PHP File

image

6. ระบุชื่อไฟล์ เป็น index  แล้วกดปุ่ม Finish

image

7. พิมพ์โค๊ต สำหรับการ Redirect

/*
* Redirect ไปที่ หน้า แรกของระบบ
* home/view/index
*/
header("location:home/view/index.php");

image

 

8. ที่ home/view  สร้างไฟล์  index.php  โดย รูปแบบ HTML และ พื้นฐานการเรียกใช้  ExtJS ดังนี้

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello world</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
</body>
</html>

* หาก Preview ดูตอนนี้เราจะได้ หน้างว่างๆ ขึ้นมา

9. เพิ่ม สคริปต์ แรก ลงใน index  โดยผมจะเก็บ ไว้ที่   home/view/js  ไฟล์ชื่อ default.js image

<!-- เพิ่ม ส่วนประกอบ -->
<script type="text/javascript" src="js/default.js"></script>

 

9. ที่ โฟเดอร์  home/view/js  สร้าง สคริปต์  default.js  เริ่มต้นสำหรับ ExtJS

/* โค๊ตในส่วนการ Require Component ต่างๆ ที่จะเรียกใช้ ให้ใส่ ดอกจัน ไปก่อน */

Ext.require([
'*'
]);

/* โค๊ตเมื่อหน้าเว็บโหลดพร้อมทำงานแล้ว จึงให้ทำงาน ซึ่งเราจะทำงานกันในส่วนนี้ อยู่ประจำ */

Ext.onReady(function() {

/* เขียน คำสั่ง ต่างๆ ในนี้ ซึ่งผมจะไม่กล่าวถึงอีก ดังนั้น ให้ เอาโค๊ต ตัวอย่างมาใส่ในนี้ได้เลย */

});

10.  ประกาศ  Hello world

Ext.create('Ext.Component', {
html: 'Hello world!', /* ใส่ HTML ในนี้ได้เลย */
width: 300,
height: 200,
padding: 20,
style: { /* เพิ่ม ภาษา CSS ได้เลย */
color: '#000000',
backgroundColor:'#FFFFFF' },
renderTo: Ext.getBody() /* ให้เรนเดอร์ ลงในเพจ */
});

7.  ไปดูหน้า ผลลัพท์ ที่ http://localhost/extjs-project

image

Leave a Reply

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น