Ext.js - การตั้งค่าสภาพแวดล้อม

การตั้งค่าสภาพแวดล้อมท้องถิ่น

ส่วนนี้แนะนำคุณเกี่ยวกับวิธีดาวน์โหลดและตั้งค่า Ext JS บนเครื่องของคุณ โปรดทำตามขั้นตอนเพื่อตั้งค่าสภาพแวดล้อม

การดาวน์โหลดไฟล์ไลบรารี

ดาวน์โหลดไฟล์ไลบรารี Ext JS รุ่นทดลองจาก Sencha https://www.sencha.com. คุณจะได้รับเวอร์ชันทดลองใช้จากไซต์ในรหัสไปรษณีย์ลงทะเบียนของคุณซึ่งจะเป็นโฟลเดอร์ซิปชื่อ ext-6.0.1-trial

คลายซิปโฟลเดอร์และคุณจะพบไฟล์ JavaScript และ CSS ต่างๆซึ่งคุณจะรวมไว้ในแอปพลิเคชันของเรา ส่วนใหญ่เราจะรวมไฟล์ต่อไปนี้ -

JavaScript Files - ไฟล์ JS ที่คุณสามารถพบได้ในโฟลเดอร์ \ ext-6.0.1-trial \ ext6.0.1 \ build คือ -

ซีเนียร์ No	ไฟล์และคำอธิบาย
1	ext.js นี่คือไฟล์หลักที่มีฟังก์ชันทั้งหมดในการเรียกใช้แอปพลิเคชัน
2	ext-all.js ไฟล์นี้มีโค้ดทั้งหมดที่ย่อขนาดโดยไม่มีความคิดเห็นในไฟล์
3	ext-all-debug.js นี่คือ ext-all.js เวอร์ชันที่ไม่มีการปิดย่อสำหรับวัตถุประสงค์ในการดีบัก
4	ext-all-dev.js ไฟล์นี้ยังไม่รวมเป็นหนึ่งเดียวและใช้เพื่อจุดประสงค์ในการพัฒนาเนื่องจากมีความคิดเห็นและบันทึกคอนโซลทั้งหมดเพื่อตรวจสอบข้อผิดพลาด / ปัญหา
5	ext-all.js ไฟล์นี้ใช้เพื่อวัตถุประสงค์ในการผลิตเป็นส่วนใหญ่เนื่องจากมีขนาดเล็กกว่าไฟล์อื่น ๆ มาก

คุณสามารถเพิ่มไฟล์เหล่านี้ลงในโฟลเดอร์ JS ของโปรเจ็กต์ของคุณหรือคุณสามารถระบุพา ธ โดยตรงที่ไฟล์นั้นอยู่ในระบบของคุณ

CSS Files - มีไฟล์ที่ใช้ธีมเป็นจำนวนมากซึ่งคุณสามารถพบได้ในโฟลเดอร์ \ ext6.0.1-trial \ ext-6.0.1 \ build \ classic \ theme-classic \ resources \ theme-classic-all.css

หากคุณกำลังจะใช้แอปพลิเคชันเดสก์ท็อปคุณสามารถใช้ธีมคลาสสิกภายใต้โฟลเดอร์ \ ext-6.0.1-trial \ ext-6.0.1 \ build \ classic
หากเราจะใช้แอปพลิเคชันมือถือคุณสามารถใช้ธีมที่ทันสมัยซึ่งสามารถพบได้ในโฟลเดอร์ \ ext-6.0.1-trial \ ext-6.0.1 \ build \ modern

ไฟล์ไลบรารีต่อไปนี้จะถูกเพิ่มในแอปพลิเคชัน Ext JS

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

คุณจะเก็บรหัสแอปพลิเคชัน ExtJS ไว้ในไฟล์ app.js

การตั้งค่า CDN

CDN เป็นเครือข่ายการจัดส่งเนื้อหาที่คุณไม่จำเป็นต้องดาวน์โหลดไฟล์ไลบรารี Ext JS แต่คุณสามารถเพิ่มลิงค์ CDN สำหรับ ExtJS ลงในโปรแกรมของคุณได้โดยตรงดังนี้ -

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

บรรณาธิการยอดนิยม

เนื่องจากเป็นเฟรมเวิร์ก JavaScript ซึ่งใช้สำหรับการพัฒนาเว็บแอปพลิเคชันในโครงการของเราเราจะมีไฟล์ HTML, JS ในการเขียนโปรแกรม Ext JS เราจะต้องมีโปรแกรมแก้ไขข้อความ มีหลาย IDE ที่มีอยู่ในตลาด แต่ในตอนนี้เราสามารถพิจารณาข้อใดข้อหนึ่งต่อไปนี้ -

Notepad - บนเครื่อง Windows คุณสามารถใช้โปรแกรมแก้ไขข้อความง่ายๆเช่น Notepad (แนะนำสำหรับบทช่วยสอนนี้), Notepad ++, sublime
Eclipse - เป็น IDE ที่พัฒนาโดยชุมชนโอเพนซอร์ส eclipse และสามารถดาวน์โหลดได้จาก https://www.eclipse.org/.

เบราว์เซอร์

Ext JS รองรับความเข้ากันได้ข้ามเบราว์เซอร์รองรับเบราว์เซอร์หลักทั้งหมดเช่น -

IE 6 ขึ้นไป
Firefox 3.6 ขึ้นไป
Chrome10 ขึ้นไป
Safari 4 ขึ้นไป
Opera 11 ขึ้นไป

คุณสามารถใช้เบราว์เซอร์ใดก็ได้เพื่อเรียกใช้แอปพลิเคชัน Ext JS