A binding agreement

Some of the state of the application is held in the URL, but other transient state is held in view models. We're going to look at an example of how data flows through this application in order to better understand how powerful data binding can be.

In portrait mode, our application has a menu button that toggles the visibility of various other components. The pseudocode for this could be:

if menu_button_is_pressed
   this.find('searchfield').show()
   this.find('newmessagebutton').hide()
   this.find('logo').hide()
else 
   this.find('searchfield').hide()
   this.find('newmessagebutton').show()
   this.find('logo').show()
end

Code like this isn't complicated, but it's lengthy and error prone, a chore to write. Instead, we can use data binding to avoid this type of code and set up the behavior during configuration, something like this:

[
    {
   	      xtype: 'button', reference: 'menubutton',
   	      enableToggle: true
   	},
    {
         xtype: 'searchfield', 
     ...