วิธีใช้การเชื่อมโยงข้อมูลใน Ext.js: คำแนะนำเชิงปฏิบัติ

เผยแพร่แล้ว: 2023-09-21

ยินดีต้อนรับสู่คู่มือปฏิบัติของเราเกี่ยวกับวิธีทำให้การผูกข้อมูลทำงานใน Ext.js JavaScript Framework! การผูกข้อมูลเป็นเหมือนกาววิเศษที่เชื่อมโยงรูปลักษณ์ของเว็บไซต์ของคุณกับสิ่งที่เปลี่ยนแปลงไป Ext.js JavaScript Framework เป็นเครื่องมือเจ๋งๆ ที่ช่วยให้คุณทำสิ่งนี้ได้อย่างง่ายดาย ในบล็อกนี้ เราจะแนะนำคุณตลอดกระบวนการทั้งหมดด้วยขั้นตอนง่ายๆ ไม่ว่าคุณจะเป็นนักเขียนโค้ดมืออาชีพหรือเพิ่งเริ่มต้น เราจะพูดถึงพื้นฐานต่างๆ

คุณจะได้เรียนรู้วิธีการเชื่อมโยงข้อมูลไปยังส่วน Ext.js JavaScript Framework เพื่อให้เว็บไซต์ของคุณสามารถตอบสนองและอัปเดตได้อย่างราบรื่น ในตอนท้าย คุณจะมีทักษะในการทำให้เว็บแอปของคุณมีการโต้ตอบและไดนามิกมากขึ้น เริ่มต้นด้วยการเชื่อมโยงข้อมูล Ext.js!

ข้อมูล

การผูกข้อมูลคืออะไร?

การผูกข้อมูลเปรียบเสมือนตัวเชื่อมโยงที่เป็นประโยชน์ระหว่างรูปลักษณ์ของเว็บไซต์กับสิ่งต่างๆ ที่สามารถเปลี่ยนแปลงได้ ลองนึกภาพมันเป็นการเชื่อมต่อมหัศจรรย์ที่ทำให้เว็บไซต์และข้อมูลทำงานร่วมกันได้อย่างราบรื่น ดังนั้น เมื่อมีการเปลี่ยนแปลงข้อมูล เช่น ราคาหรือชื่อ เว็บไซต์จะแสดงการเปลี่ยนแปลงนั้นโดยอัตโนมัติโดยที่คุณไม่ต้องดำเนินการใดๆ

ใน Ext.js ซึ่งเป็นชุดเครื่องมือสำหรับนักพัฒนาเว็บ มีฟีเจอร์เจ๋งๆ ที่เรียกว่าการผูกข้อมูลแบบสองทาง หมายความว่าเมื่อคุณทำอะไรบางอย่างบนเว็บไซต์ เช่น คลิกปุ่มหรือพิมพ์ลงในช่อง จะเป็นการอัปเดตข้อมูล และเมื่อข้อมูลเปลี่ยนแปลงก็จะอัพเดตเว็บไซต์ทันที ทำให้เว็บไซต์ของคุณมีการโต้ตอบและตอบสนองมากขึ้น

ความสำคัญของการผูกข้อมูลในการพัฒนาเว็บคืออะไร?

การเชื่อมโยงข้อมูลมีความสำคัญอย่างยิ่งในการพัฒนาเว็บเพราะช่วยให้แน่ใจว่ารูปลักษณ์ของเว็บไซต์ของคุณตรงกับข้อมูลที่เปลี่ยนแปลงโดยที่คุณไม่ต้องดำเนินการเองทั้งหมด ทำให้แอปบนเว็บและมือถือมีความไดนามิกและตอบสนองมากขึ้น ช่วยประหยัดเวลาและความพยายามของนักพัฒนาในการเขียนโค้ดที่ซับซ้อน

การเชื่อมโยงข้อมูลแบบสองทางใน Ext.js

การผูกทุกประเภทใน Ext JS และ Sencha Touch เป็นไปตามกระบวนการที่คุ้นเคย: ใช้ตัวตั้งค่าและตัวอัปเดต การเชื่อมโยงทางเดียวหมายถึงเมื่อมีบางสิ่งเปลี่ยนแปลงใน ViewModel มันจะอัปเดตการกำหนดค่าโดยใช้ตัวตั้งค่า การเชื่อมโยงแบบสองทางจะคล้ายกัน แต่ใช้ตัวอัปเดตซึ่งเหมือนกับตัวจัดการพิเศษ หากผู้อัปเดตเปลี่ยนการกำหนดค่าได้สำเร็จ ตัวอัปเดตจะเปลี่ยนค่าที่เชื่อมโยงใน ViewModel ซึ่งจะอัปเดตการเชื่อมโยงอื่นๆ ด้วย

หากต้องการให้การกำหนดค่ารองรับการเชื่อมโยงแบบสองทาง คุณสามารถใช้ตัวเลือก “twoWayBindable” ได้ โดยปกติแล้วจะใช้เบื้องหลัง แต่จะมีประโยชน์เมื่อสร้างมุมมองหรือส่วนประกอบที่กำหนดเอง ตัวอย่างเช่น Ext.field.Text กำหนดค่า “ค่า” ของมันให้ผูกได้สองทางดังนี้:

twoWayBindable: {

ค่า: 1

}

ในตัวอย่างที่มีฟิลด์สปินเนอร์ เมื่อค่ามีการเปลี่ยนแปลง มันจะทริกเกอร์ตัวอัปเดต ซึ่ง ViewModel จะสกัดกั้น จากนั้นจะอัปเดตเนื้อหาของคอนเทนเนอร์ด้านล่าง ทั้งหมดนี้เป็นเพราะลิงก์การกำหนดค่า "html" วิธีนี้ทำงานได้อย่างราบรื่นเนื่องจาก Ext.field.Spinner เกี่ยวข้องกับ Ext.field.Text ซึ่งได้รับการตั้งค่าให้ทำงานกับ "ค่า" แบบสองทาง

เซนฉะ

จะติดตั้งและตั้งค่า Ext.js ในสภาพแวดล้อมการพัฒนาได้อย่างไร

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

แยกโฟลเดอร์เพื่อค้นหาไฟล์ JavaScript และ CSS ต่างๆ สำหรับแอปพลิเคชันของคุณ ไฟล์ JavaScript ที่สำคัญประกอบด้วย:

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

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

ในไฟล์ HTML ให้ลิงก์ไปยังไฟล์ CSS และ JavaScript ที่จำเป็น หรือคุณสามารถใช้ Content Delivery Network (CDN) เพื่อหลีกเลี่ยงการดาวน์โหลดไฟล์ในเครื่องได้ Ext JS เข้ากันได้กับเบราว์เซอร์หลากหลาย รวมถึง IE 6 ขึ้นไป, Firefox, Chrome, Safari และ Opera ทำให้มีความหลากหลายสำหรับการพัฒนาเว็บ

เทคโนโลยี

จะสร้างแอปพลิเคชัน Ext.js อย่างง่ายได้อย่างไร

ขั้นตอนที่ตรงไปตรงมาเพื่อสร้างแอป Ext JS อย่างรวดเร็ว:

ขั้นตอนที่ 1: การติดตั้งแพ็คเกจจาก npm

Ext JS เสนอแพ็คเกจทดลองใช้งาน 30 วันบนรีจิสทรี npm สาธารณะ คุณสามารถรับ Ext JS เวอร์ชันล่าสุดได้โดยดำเนินการคำสั่งนี้:

$ npm ติดตั้ง -g @sencha/ext-gen

สำหรับผู้ใช้ที่มีอยู่ Ext JS และแพ็คเกจที่เกี่ยวข้องจะอยู่ในรีจิสทรี npm ส่วนตัวของ Sencha หากต้องการเข้าถึง ให้เข้าสู่ระบบรีจิสทรีและติดตั้ง npm โดยใช้คำสั่งต่อไปนี้:

เข้าสู่ระบบ $ npm –registry=https://npm.sencha.com/ –scope=@sencha

$ npm ติดตั้ง -g @sencha/ext-gen

คำสั่งเหล่านี้กำหนดค่า npm เพื่อดึงข้อมูลและติดตั้งแพ็คเกจจากรีจิสทรีของ Sencha ภายใต้ขอบเขต '@sencha'

ขั้นตอนที่ 2: การสร้างแอปพลิเคชัน

ในขั้นตอนนี้ เราจะสร้างแอปสองมุมมองง่ายๆ ที่มีโฮมเพจและกริดโดยใช้คำสั่งต่อไปนี้:

แอป ext-gen -a -t moderndesktop -n ModernApp

ขั้นตอนที่ 3: สำรวจแอป

ตอนนี้โครงการของเราถูกสร้างขึ้นแล้ว ให้ไปที่ไดเร็กทอรีนั้นโดยใช้:

cd ./modern-app

หากต้องการสำรวจแอปของคุณ ให้เริ่มต้นด้วยคำสั่ง npm ต่อไปนี้:

เวลา 13.00 น. เริ่มต้น

ขั้นตอนเหล่านี้จะช่วยให้คุณตั้งค่าแอปพลิเคชัน Ext JS ของคุณแบบโอเพนซอร์สและฟรีได้อย่างรวดเร็ว

Sencha: คู่หูของคุณสำหรับ UI ที่ยอดเยี่ยม - ติดต่อ!

โมเดลที่ใช้ใน Ext.js คืออะไร?

โมเดลแสดงถึงข้อมูลประเภทหนึ่งภายในแอปพลิเคชัน ที่แกนหลัก โมเดลประกอบด้วยชุดของฟิลด์และข้อมูลที่เกี่ยวข้อง โมเดลประกอบด้วยองค์ประกอบหลักสี่องค์ประกอบ: ฟิลด์ พร็อกซี การเชื่อมโยง และการตรวจสอบความถูกต้อง

เขตข้อมูล

ฟิลด์โมเดลจะถูกระบุภายในคุณสมบัติ 'ฟิลด์' เป็นอาร์เรย์ แต่ละฟิลด์จะอธิบายว่าเป็นออบเจ็กต์ JavaScript ที่มีคุณลักษณะ เช่น ชื่อและประเภท

หนังสือมอบฉันทะ

พร็อกซีถูกใช้โดยร้านค้าและจัดการงานที่เกี่ยวข้องกับการโหลดและจัดเก็บข้อมูลโมเดล ผู้รับมอบฉันทะมีสองประเภท:

  1. พร็อกซีไคลเอ็นต์ซึ่งใช้หน่วยความจำเบราว์เซอร์หรือที่เก็บข้อมูลในตัวเครื่องเพื่อจัดเก็บข้อมูล
  2. พร็อกซีเซิร์ฟเวอร์มีหน้าที่ส่งข้อมูลไปยังเซิร์ฟเวอร์ผ่านวิธีการต่างๆ เช่น Ajax, JSON-P หรือ REST

สมาคม

โมเดลสามารถสร้างการเชื่อมต่อระหว่างกันได้ แม้ในแอปพลิเคชันขนาดเล็กที่มีหลายรุ่น สามารถสร้างการเชื่อมโยงประเภทต่างๆ ได้ รวมถึงความสัมพันธ์แบบหนึ่งต่อหนึ่ง หนึ่งต่อกลุ่ม และหลายต่อหนึ่ง

การตรวจสอบ

การตรวจสอบความถูกต้องเป็นโครงสร้างพิเศษที่ใช้เพื่อตรวจสอบความถูกต้องของข้อมูลที่จัดเก็บไว้ในฟิลด์แบบจำลองเฉพาะ ExtJS มีชุดการตรวจสอบความถูกต้องมาตรฐาน โดยมีตัวอย่างทั่วไปในการตรวจสอบความยาวฟิลด์ขั้นต่ำหรือสูงสุด

บทบาทของการดูใน Ext.js คืออะไร?

มุมมองจัดการด้านภาพและส่วนต่อประสานผู้ใช้ของแอปพลิเคชัน มุมมองประกอบด้วยส่วนประกอบและเค้าโครง แต่ละส่วนประกอบสามารถทำหน้าที่เป็นคอนเทนเนอร์สำหรับส่วนประกอบอื่น เปิดใช้งานการจัดโครงสร้างของอินเทอร์เฟซแอปพลิเคชันเป็นคอลเลกชันมุมมองแบบลำดับชั้น

ใน ExtJS มีเลย์เอาต์ที่หลากหลาย:

  1. FitLayout: เค้าโครงนี้จะขยายรายการภายในให้พอดีกับขอบเขตของคอนเทนเนอร์หลัก
  2. VBoxLayout: อำนวยความสะดวกในการจัดเรียงรายการในแนวตั้ง
  3. HBoxLayout: อำนวยความสะดวกในการจัดเรียงรายการในแนวนอน
  4. BorderLayout: เลย์เอาต์นี้อนุญาตให้แนบรายการเข้ากับด้านใดด้านหนึ่งของหน้าต่างทั้งสี่ด้านหรือเทียบชิดตรงกลาง

ฐานข้อมูล

วิธีการตั้งค่าการเชื่อมโยงข้อมูลระหว่างโมเดลและมุมมอง

คลาส Ext.app.ViewModel มีความสำคัญอย่างยิ่งต่อการเชื่อมต่อข้อมูล คิดว่ามันเหมือนกับการจัดงานข้อมูล คล้ายกับ Ext.data.Model แต่จัดการข้อมูลในลักษณะที่มีโครงสร้าง เช่น แผนผังครอบครัว ไม่ใช่เพียงรายการข้อเท็จจริง นอกจากนี้ยังมีวิธี 'bind()' เพื่อดูการเปลี่ยนแปลงในข้อมูลที่จัดระเบียบนี้

ทีนี้ เกี่ยวกับแผนผังลำดับวงศ์ตระกูลของข้อมูล มันทำงานเหมือนกับการถ่ายทอดความรู้ในครอบครัว เด็กสามารถเรียนรู้จากผู้ปกครอง และผู้ปกครองจากผู้ปกครอง และอื่นๆ ในกรณีของเรา แม้แต่ส่วนประกอบ "หลาน" ก็สามารถเรียนรู้จากส่วนประกอบระดับที่สูงกว่าได้ มันคือทั้งหมดที่เกี่ยวกับการแบ่งปันข้อมูลอย่างมีประสิทธิภาพ

การตั้งค่าการเชื่อมโยงข้อมูลระหว่างโมเดลและมุมมองใน Ext JS เกี่ยวข้องกับขั้นตอนสำคัญบางประการ:

  1. สร้างโมเดล : ขั้นแรก ให้กำหนดโมเดลที่แสดงถึงโครงสร้างข้อมูลที่คุณต้องการใช้งานโมเดลนี้ควรมีฟิลด์ที่สอดคล้องกับข้อมูลที่คุณต้องการแสดงในมุมมองของคุณ
  2. สร้าง ViewModel : ViewModel ทำหน้าที่เป็นสื่อกลางระหว่างโมเดลและมุมมองของคุณจะจัดการข้อมูลและให้วิธีการผูกเข้ากับส่วนประกอบมุมมองของคุณ คุณสามารถสร้าง ViewModel ในคอนโทรลเลอร์หรือมุมมองของคุณ
  3. ผูกข้อมูลกับส่วนประกอบ : ใช้วิธี 'ผูก' ของ ViewModel เพื่อเชื่อมต่อฟิลด์ของโมเดลของคุณกับส่วนประกอบในมุมมองของคุณตัวอย่างเช่น หากคุณมีฟิลด์ข้อความที่ควรแสดงชื่อของบุคคล คุณสามารถผูกเข้ากับฟิลด์ที่เกี่ยวข้องในโมเดลของคุณได้

มุมมองรุ่น: {

สูตร: {

ชื่อเต็ม: ฟังก์ชั่น (รับ) {

var firstName = get('user.firstName');

var นามสกุล = get('user.lastName');

กลับชื่อ + ' ' + นามสกุล;

}

}

},

รายการ: [{

xtype: 'ฟิลด์ข้อความ',

fieldLabel: 'ชื่อ',

ผูก: '{user.firstName}'

}, {

xtype: 'ฟิลด์ข้อความ',

fieldLabel: 'นามสกุล',

ผูก: '{user.lastName}'

}, {

xtype: 'ฟิลด์ข้อความ',

fieldLabel: 'ชื่อเต็ม',

ผูก: '{fullName}' // นี่คือฟิลด์จากการคำนวณ

}]

“`

  1. อัปเดตข้อมูล : เมื่อคุณอัปเดตข้อมูลในแบบจำลองของคุณ (เช่น เมื่อผู้ใช้ป้อนค่าใหม่) กลไกการเชื่อมโยงข้อมูลจะอัปเดตส่วนประกอบมุมมองที่เชื่อมต่อโดยอัตโนมัติในทำนองเดียวกัน เมื่อผู้ใช้โต้ตอบกับส่วนประกอบของมุมมอง (เช่น การแก้ไขฟิลด์) การเปลี่ยนแปลงจะสะท้อนกลับไปยังโมเดล

ผู้ชายที่ใช้พีซี

บทสรุป

Ext JS มอบวิธีที่ชาญฉลาดในการเชื่อมโยงข้อมูลและสิ่งที่คุณเห็นบนหน้าเว็บ ด้วยการตั้งค่าโมเดลและเชื่อมต่อกับองค์ประกอบหน้าเว็บ คุณจะมั่นใจได้ว่าเมื่อข้อมูลมีการเปลี่ยนแปลง นอกจากนี้ หน้าเว็บของคุณจะอัปเดตโดยอัตโนมัติ และเมื่อผู้ใช้โต้ตอบกับหน้าเว็บของคุณ การเปลี่ยนแปลงจะถูกบันทึกไว้ในข้อมูลของคุณ

สิ่งนี้ทำให้การสร้างเว็บแอปง่ายขึ้น ปรับปรุงประสบการณ์ของผู้ใช้ไซต์ของคุณ และทำให้นักพัฒนาสร้างเว็บแอปพลิเคชันแบบไดนามิกและตอบสนองได้ง่ายขึ้น Ext JS ทำให้กระบวนการทั้งหมดของโค้ด html ง่ายขึ้น ทำให้การพัฒนาเว็บมีประสิทธิภาพและใช้งานง่ายยิ่งขึ้น

คำถามที่พบบ่อย

Ext.js คืออะไร และเหตุใดจึงใช้เพื่อผูกข้อมูล

Ext JS เป็นเฟรมเวิร์ก JavaScript ช่วยลดความยุ่งยากในการผูกข้อมูล สร้างแอปพลิเคชันเว็บและมือถือที่ตอบสนองได้อย่างมีประสิทธิภาพ

ฉันต้องใช้เครื่องมืออะไรในการผูกข้อมูล Ext.js

หากต้องการเริ่มการเชื่อมโยงข้อมูล Ext.js คุณจะต้องมีเฟรมเวิร์ก Ext.js โปรแกรมแก้ไขโค้ด และเว็บเบราว์เซอร์

การออกแบบเว็บแบบตอบสนองคืออะไร?

การออกแบบเว็บที่ตอบสนองจะปรับส่วนประกอบของเว็บให้เข้ากับขนาดหน้าจอต่างๆ เพื่อให้มั่นใจว่าผู้ใช้จะได้รับประสบการณ์ที่ดีที่สุดบนเดสก์ท็อป แท็บเล็ต และโทรศัพท์มือถือ

JQuery เป็น JS Framework หรือไม่

ไม่ jQuery ไม่ใช่เฟรมเวิร์ก JavaScript เป็นไลบรารีที่ทำให้การจัดการ DOM และคำขอ AJAX ง่ายขึ้น