View Models and Data Binding - Sencha Ext JS 5+


Overview

A ViewModel class manages a data object, allowing those interested in this data to bind to it, and be notified when it changes. The ViewModel, like ViewController, is owned by the view that references it. Because ViewModels are associated with a view, they are also able to link to a parent ViewModel owned by ancestor components in the component hierarchy. This allows child views to simply inherit the data of their parent ViewModel.

Components have a bind config that allows them to associate many of their configs to data from the ViewModel. Using bind, you can be sure that the appropriate component config will have its setter method called whenever the bound value changes - no custom event handlers needed. Binding connects data from an Ext.app.ViewModel to any component config properties that have setter method. For instance, since there is a setTitle() method on Ext.panel.Panel, you can bind to the title configuration. In this example, set the width of a panel based on the results of our ViewModel's data. We can bind our data to width since setWidth() is a method that Ext.panel.Panel may use.

Boolean values, such as visible, hidden, disabled, checked, and pressed. Bind templates support boolean negation "inline" in the template. Boolean inversion is common enough there is special provision for it...

Values in single token templates are not converted to strings. In the above, while name is a string value, it is negated using "!" and becomes a boolean value and that is passed to the setHidden method on the button.

Bound config properties will always overwrite configurations set statically on the component as soon as the bound result is available. Bound data will always take priority over static configuration values but may be delayed in order to fetch that data. In the following, once the binding for “name” is delivered, the “Simple Form” title will be replaced.


Previous | Home