Ext.js - Dữ liệu

Gói dữ liệu được sử dụng để tải và lưu tất cả dữ liệu trong ứng dụng.

Gói dữ liệu có rất nhiều lớp nhưng các lớp quan trọng nhất là:

Model
Store
Proxy

Mô hình

Lớp cơ sở cho mô hình là Ext.data.Model. Nó đại diện cho một thực thể trong một ứng dụng. Nó liên kết dữ liệu cửa hàng để xem. Nó có ánh xạ các đối tượng dữ liệu phụ trợ tới chế độ xem dataIndex. Dữ liệu được tìm nạp với sự trợ giúp của lưu trữ.

Tạo mô hình

Để tạo một mô hình, chúng ta cần mở rộng lớp Ext.data.Model và chúng ta cần xác định các trường, tên của chúng và ánh xạ.

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

Ở đây, tên phải giống với dataIndex mà chúng ta khai báo trong dạng xem và ánh xạ phải khớp với dữ liệu, tĩnh hoặc động từ cơ sở dữ liệu, sẽ được tìm nạp bằng cách sử dụng store.

Cửa hàng

Lớp cơ sở cho cửa hàng là Ext.data.Store. Nó chứa dữ liệu được lưu trong bộ nhớ cache cục bộ, dữ liệu này sẽ được hiển thị trên chế độ xem với sự trợ giúp của các đối tượng mô hình. Store tìm nạp dữ liệu bằng proxy, có đường dẫn được xác định cho các dịch vụ để tìm nạp dữ liệu phụ trợ.

Dữ liệu lưu trữ có thể được tìm nạp theo hai cách - tĩnh hoặc động.

Cửa hàng tĩnh

Đối với cửa hàng tĩnh, chúng tôi sẽ có tất cả dữ liệu hiện diện trong cửa hàng như được hiển thị trong đoạn mã sau.

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

Cửa hàng động

Dữ liệu động có thể được tìm nạp bằng proxy. Chúng ta có thể có proxy có thể lấy dữ liệu từ Ajax, Rest và Json.

Ủy quyền

Lớp cơ sở cho proxy là Ext.data.proxy.Proxy. Proxy được Người mẫu và Cửa hàng sử dụng để xử lý việc tải và lưu dữ liệu Người mẫu.

Có hai loại proxy

Proxy Máy khách
Proxy Máy chủ

Proxy Máy khách

Các proxy khách bao gồm Bộ nhớ và Bộ nhớ Cục bộ sử dụng bộ nhớ cục bộ HTML5.

Proxy Máy chủ

Các proxy máy chủ xử lý dữ liệu từ máy chủ từ xa bằng cách sử dụng dữ liệu Ajax, Json và dịch vụ 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'
      },
   }
});