Understanding the Store

The primary data container in Bryntum is the Store. Stores hold the data that powers all Bryntum widgets. Items within stores are often called records. A record is an instance of the Model or one of the Model subclasses.

But you can't use Store itself in Bryntum Calendar. Instead, you have to use one of the subclasses that extend the Store class, such as AssignmentStore or ResourceStore. We also refer to these subclasses as stores.

For example, you can use ResourceStore in a Bryntum Calendar:

new Calendar({
  resourceStore : {
    data: [
      { id : 1, name : "ABBA", country : "Sweden" },
      { id : 2, name : "Beatles", country : "UK" }
    ]
  }
});

Different stores are used for different Bryntum components.

Bryntum Calendar uses the following Stores to hold data.

A store uses a Model as the blueprint for each row (called record) it holds.

Similar to the Store, Model is also extended as ResourceModel, EventModel and so on.

Although we recommend loading all your stores from a single endpoing, you can also load each store separately using readUrl.

new Calendar({
  assignmentStore : {
    autoLoad : true, // auto loads the data when store is initiated
    readUrl  : "data/assignment.json",
  }
});

Data formats

Stores can accept arrays of JavaScript or JSON data in either of the following structures:

• Flat data
• Tree data

Flat data

You can use non-hierarchical flat data in a Store, such as the following JavaScript array:

[
  { id : 1, name : 'Dan Stevenson', city : 'Los Angeles', age : 24 },
  { id : 2, name : 'Talisha Babin', city : 'Paris', age : 27 },
  { id : 3, name : 'Maxim Gagarin', city : 'Moscow', age : 34 },
  { id : 4, name : 'Linda Johansson', city : 'Stockholm', age : 29 }
];

Tree data

You can also put hierarchical tree data in a Store by using the children property to create nested relationships between data objects. The following JavaScript object is an example of tree data:

[
    {
        id       : 1,
        name     : "ABBA",
        country  : "Sweden",
        children : [
            { id : 2, name : "Agnetha" },
            { id : 3, name : "Bjorn" },
            { id : 4, name : "Benny" },
            { id : 5, name : "Anni-Frid" }
        ]
    }
]

Interacting with Store data

You can perform multiple actions on the information contained in stores, such as filtering or sorting the data within a Store by one or more of its fields, or finding and retrieving a specific record from within a Store.

For example, you can sort the Store data by one or more fields as follows:

const store = new Store({
  sorters : [
    { field : 'age', ascending : false } // descending
  ]
});

You can also filter the records within a Store as follows:

// filters the record to find the ones that have "powers : 'Martial arts'"
store.filter({ 
    property : 'powers', 
    value    : 'Martial arts'
});

Alternatively, you can turn on the filter feature to let the user apply their own filters on the Calendar component.

You may want to take a look at our filtering demo.

To learn more, visit our guide to using a Store. You can also take a look at our features documentation.

Continue reading: Interacting with the server