Ext.js - Data

Paket data digunakan untuk memuat dan menyimpan semua data dalam aplikasi.

Paket data memiliki banyak kelas tetapi kelas yang paling penting adalah -

• Model
• Store
• Proxy

Model

Kelas dasar untuk model adalah Ext.data.Model. Ini mewakili entitas dalam aplikasi. Ini mengikat data penyimpanan untuk dilihat. Ini memiliki pemetaan objek data backend ke view dataIndex. Data diambil dengan bantuan toko.

Membuat Model

Untuk membuat model, kita perlu memperluas kelas Ext.data.Model dan kita perlu menentukan bidang, namanya, dan pemetaan.

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

Di sini, namanya harus sama dengan dataIndex, yang kita deklarasikan dalam tampilan dan pemetaan harus cocok dengan data, baik statis maupun dinamis dari database, yang akan diambil menggunakan store.

Toko

Kelas dasar untuk toko adalah Ext.data.Store. Ini berisi data yang di-cache secara lokal, yang akan ditampilkan dengan bantuan objek model. Store mengambil data menggunakan proxy, yang memiliki jalur yang ditentukan untuk layanan guna mengambil data backend.

Data penyimpanan dapat diambil dengan dua cara - statis atau dinamis.

Penyimpanan statis

Untuk penyimpanan statis, kami akan memiliki semua data yang ada di toko seperti yang ditunjukkan pada kode berikut.

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" }
   ];
});

Toko Dinamis

Data dinamis dapat diambil menggunakan proxy. Kita dapat memiliki proxy yang dapat mengambil data dari Ajax, Rest, dan Json.

Proksi

Kelas dasar untuk proxy adalah Ext.data.proxy.Proxy. Proksi digunakan oleh Model dan Toko untuk menangani pemuatan dan penyimpanan data Model.

Ada dua jenis proxy

• Proksi Klien
• Proxy Server

Proksi Klien

Proksi klien mencakup Memori dan Penyimpanan Lokal menggunakan penyimpanan lokal HTML5.

Proxy Server

Proksi server menangani data dari server jauh menggunakan Ajax, data Json, dan layanan Rest.

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