JS Control Data Source

 

Introduction:

When we display a large amount of data in tables and lists, it is very complicated and troublesome to directly manipulate the control DOM if we need to add, delete, modify, and sort data, consider the following scenarios:

1. Add a record to the table
2. Edit some fields recorded in the table
3. Sort records by Id

These operations are very common, but they involve a lot of trivial things:

1. Manipulate the corresponding DOM of the record, create a large number of input boxes in the table to change the data, and submit the data through the form.
2. Send the Modification result to the background
3. Sort DOM and so on

In this case, the cost will be very high. Let's take a closer look and start from the MVC mode:

 

L DOM and style, which are View

L The data source is Model.

L The control logic of the control is Controll.

We say that all the controls of the View are implemented through Controll. The changes of the Model cause the changes of the Control, and the Control controls the changes of the View. Therefore, we use Control to monitor the changes of the View and Model, the coupling is separated, so I introduced the Store class by referring to the Ext implementation.

Store class:

Let's analyze the functions required by the Store class:

1. Loading data: asynchronously or directly loads data in the memory.
2. Data traversal, addition, deletion, and modification
3. Data Sorting: Remote sorting or current page sorting
4. Array or tree data can be loaded.

Simplify the implementation of EXT Store and obtain the following class structure diagram.

 

Use a proxy class to load data, blocking the differences between asynchronous loading and Memory loading

1. To implement local sorting through the Sortable extension, you must specify the fields:

1) sortField: Sorting field, such as id field and Date Field

2) sortDirection: sorting method, ascending or descending

2. Use Proxy to load data. You need to provide the following method:

1) read (): reads data from the data source.

2) sync (): synchronize data with the data source

3. AbstractStore is used to abstract common functions and interfaces of data sources. Store and TreeStore are used to implement data sources of Operation arrays and data sources of Operation tree structures respectively;

4. Use the Binable extension to define the extension of the control that uses the data source. You need to implement the following methods:

1) onLoad (): load data

2) onAdd (): add data

3) onRemove (): Remove Data

4) onUpdate (): update data

5) onLocalSort (): Sorting in memory

The implementation of Store and TreeStore is complicated, but it is easy to use. You can understand it through the example below.

Implementation:

Grid implementation

Cascade select box implementation