Ext.js - ข้อมูล
แพ็คเกจข้อมูลใช้สำหรับโหลดและบันทึกข้อมูลทั้งหมดในแอปพลิเคชัน
แพ็คเกจข้อมูลมีคลาสมากมาย แต่คลาสที่สำคัญที่สุดคือ -
- Model
- Store
- Proxy
รุ่น
คลาสพื้นฐานสำหรับโมเดลคือ Ext.data.Model. แสดงถึงเอนทิตีในแอปพลิเคชัน มันผูกข้อมูลร้านค้าเพื่อดู มีการแมปวัตถุข้อมูลแบ็กเอนด์กับ view dataIndex ข้อมูลถูกดึงด้วยความช่วยเหลือของร้านค้า
การสร้างแบบจำลอง
ในการสร้างโมเดลเราจำเป็นต้องขยายคลาส Ext.data.Model และเราต้องกำหนดฟิลด์ชื่อและการแมป
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
ที่นี่ชื่อควรจะเหมือนกับ dataIndex ซึ่งเราประกาศในมุมมองและการแมปควรตรงกับข้อมูลไม่ว่าจะเป็นแบบคงที่หรือแบบไดนามิกจากฐานข้อมูลซึ่งจะดึงโดยใช้ store
เก็บ
ชั้นพื้นฐานสำหรับร้านค้าคือ Ext.data.Store. ประกอบด้วยข้อมูลที่แคชไว้ในเครื่องซึ่งจะแสดงผลในมุมมองด้วยความช่วยเหลือของโมเดลออบเจ็กต์ จัดเก็บดึงข้อมูลโดยใช้พร็อกซีซึ่งมีเส้นทางที่กำหนดไว้สำหรับบริการเพื่อดึงข้อมูลแบ็กเอนด์
ข้อมูลที่จัดเก็บสามารถดึงได้สองวิธี - แบบคงที่หรือแบบไดนามิก
ร้านค้าคงที่
สำหรับร้านค้าแบบคงที่เราจะมีข้อมูลทั้งหมดอยู่ในสโตร์ดังที่แสดงในรหัสต่อไปนี้
Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
});
ร้านค้าแบบไดนามิก
ข้อมูลแบบไดนามิกสามารถดึงได้โดยใช้พร็อกซี เราสามารถมีพร็อกซีที่สามารถดึงข้อมูลจาก Ajax, Rest และ Json
พร็อกซี
คลาสพื้นฐานสำหรับพร็อกซีคือ Ext.data.proxy.Proxy โมเดลและร้านค้าใช้พร็อกซีเพื่อจัดการการโหลดและบันทึกข้อมูลโมเดล
พร็อกซีมีสองประเภท
- Client Proxy
- พร็อกซีเซิร์ฟเวอร์
Client Proxy
พร็อกซีไคลเอ็นต์ประกอบด้วยหน่วยความจำและที่เก็บข้อมูลในเครื่องโดยใช้ที่เก็บข้อมูลในเครื่อง HTML5
พร็อกซีเซิร์ฟเวอร์
พร็อกซีเซิร์ฟเวอร์จัดการข้อมูลจากเซิร์ฟเวอร์ระยะไกลโดยใช้ Ajax, Json data และ Rest service
Defining proxies in the server
Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
proxy : {
type : 'rest',
actionMethods : {
read : 'POST' // Get or Post type based on requirement
},
url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path
// which fetches data from database or Json file path where the data is stored
reader: {
type : 'json', // the type of data which is fetched is of JSON type
root : 'data'
},
}
});