Hey all! Can you already smell the autumn in the air? Alas, the fruitful summer gradually comes to an end, and it’s time to receive a Bachelor’s degree in Webix 🙂 Today I suggest you to brush up your knowledge of data components by uncovering one of the base concepts – DataStore. In the article below you will learn what is hidden behind visual presentation and may pick useful snippets for working with data.
All data components and view-less collections in Webix are based on DataStore or TreeStore depending on data, which can be either linear or hierarchical. Unlike visual components, data collections are abstract and do not have visual representation, but they also use DataStore.
DataStore/TreeStore is a core of all data operations, which includes logic for retrieving, iterating, filtering and sorting data items. TreeStore inherits from DataStore and takes the basic API from it.
Most of the DataStore methods and events are exported to the views/collections that are built upon it, but some of them are specific. You can access DataStore or TreeStore in the following way:
var collection = new webix.DataCollection({...});
var upload = webix.ui({view:”uploader”, ...});
//access to their DataStore
var data1 = tree.data;
var data2 = collection.data;
var data3 = uploader.files;
DataStore and TreeStore methods
Although most of the methods are shared with the related views, it’s always useful to check the API of the storage module for specific methods.
For instance, DataStore offers the each() iterator while TreeStore includes even more helpful methods eachChild(), eachLeaf() and eachSubItem() in addition to it:
list.data.each(function(item){
console.log(item.title);
});
//logs the “title” of each immediate child of the “root” branch
tree.data.eachChild(“root”, function(item){
console.log(item.title);
});
DataStore and TreeStore Events
You cannot even imagine how many events remain uncaught only because developers don’t know about them! Sometimes only DataStore or TreeStore trigger the needed event and all the event handlers of the related view are helpless.
Luckily, you can enter Webix debug mode to monitor all the events in the app workflow. The screenshot below shows the events happening during list filtering:
As you can see, onBeforeFilter and onAfterFilter events fire only from the DataStore. Good news is that you can still catch them all:
view:”list”, on:{
“data->onAfterFilter”:function(){ webix.message(“Done”); }
}
});
//or
list.data.attachEvent(“onAfterFilter”, function(){ webix.message(“Done”); });
Datastore-only events also include onParse, onStoreUpdated, onIdChange, etc.
DataStore and TreeStore Properties
In conclusion, here’s a pair of properties which can make your life easier while working with data components:
– list.data.pull – returns a hash of all component data regardless of current order, sorting or filtering;
– list.data.order – returns an array of data item IDs with respect to current order, sorting and filtering.
I hope that you feel far more confident now and can easily master complex data applications. If something remains unclear, feel free to post questions here or on the forum.
P. S. Actually, It’s me who has a question. Could you please share the topics that are the most difficult for you to comprehend? Some obvious things may have skipped from our documentation, and your voice can definitely improve the situation 🙂 See you in the comments!
