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'
      },
   }
});