ความต้องการของ ExtJS4 คือกลไกใหม่ ซึ่งส่วนใหญ่จะใช้กลไกการโหลดแบบอะซิงโครนัส ด้วยวิธีนี้ ไฟล์ js ที่เกี่ยวข้องจะไม่ถูกโหลดเว้นแต่จะคลิกปุ่มหรือตัวเลือกที่เกี่ยวข้อง ซึ่งจะช่วยปรับปรุงความเร็วในการโหลดและเวลารอของผู้ใช้
กลไกจำเป็นต้องใช้ผ่านฟังก์ชัน Ext.Loader.setConfig เพื่อตั้งค่าไดเร็กทอรีการแมปสำหรับการค้นหาไฟล์ จากนั้นใช้ Ext.require เพื่อโหลดไฟล์ js ที่เกี่ยวข้องเมื่อจำเป็น
โครงสร้างการจัดเก็บไฟล์เป็นดังนี้:
โฟลเดอร์ ux อยู่ในไดเร็กทอรีเดียวกับ Lesson2.htm และ Lesson22.js และ MyWin.js ที่ใช้จะถูกจัดเก็บไว้ในโฟลเดอร์ ux
รหัสใน Lesson2.html เป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>เดสก์ท็อป extjs4</title>
<!--ซีเอส-->
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="lesson22.js"></script>
</หัว>
<ร่างกาย>
<button id="myButton" align="center">แสดง</button>
</ร่างกาย>
</html>
ในส่วนโค้ดนี้ ไฟล์ MyWin.js ในไดเร็กทอรี ux จะไม่ถูกโหลด ดังนั้นเมื่อมีการโหลดเพจ ไฟล์ MyWin.js จะไม่ถูกโหลดในเวลาเดียวกัน แต่จะถูกโหลดอีกครั้งเมื่อจำเป็น ความต้องการนี้ทำได้โดยการคลิกปุ่ม
เนื้อหาของไฟล์ Lesson22.js เป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
(การทำงาน(){
Ext.Loader.setConfig({
เปิดใช้งาน: จริง // เปิดใช้งานโหมดการโหลดแบบอะซิงโครนัส
เส้นทาง:{
myApp:'lesson2/ux' //ตำแหน่งไฟล์ประกาศ
-
-
Ext.onReady(ฟังก์ชั่น(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
หัวข้อ: 'การทดสอบของฉัน'
-
Ext.get('myButton').on('คลิก',function(){
mw.show();
-
-
-
-
เนื้อหาของไฟล์ MyWin.js ในไดเร็กทอรี ux มีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
Ext.define('ux.MyWin',{
ขยาย:'Ext.window.Window',
หัวเรื่อง:'ลงทะเบียน',
ความกว้าง:400,
ส่วนสูง:300
-
หมายเหตุ: ชื่อไฟล์ MyWin และชื่อฟังก์ชันที่นี่จะต้องเหมือนกัน ฉันทดสอบแล้ว หากต่างกันก็จะไม่แสดงขึ้นมา
ในตอนแรกผมใช้วิธีการเขียนในการบรรยายครั้งที่สองของวิดีโอการสอน ExtJS4 บน uspcat แต่ผลลัพธ์ที่ฉันต้องการไม่สามารถปรากฏได้ อาจเป็นปัญหาของเวอร์ชันหรืออาจเป็นปัญหาของตัวเองก็ได้ อันนี้ผมใช้วิธี need ได้ครับ นี่เป็นบันทึกสำหรับทุกคนที่มีความสับสนเหมือนกัน