A more complex DataView component

A DataView component is a great component in the Ext JS library. In the next example, we are going to list the users in the application and activate or deactivate them with a double click on the user record. Let's add some new lines to our previous DataView code:

  var myXTemplate = new Ext.XTemplate( //step 1
  '<tplfor=".">',
  '<div class="user {[this.getActiveclass(values.active)]}">',
  '<div class="user_row">',
  '<div class="user_img">',
  '<img src="images/{twitter_account}.jpg" width="37" height="37">',
  '</div>',
  '<div class="usr_name">{firstName} {lastName}<br>',
  '<span class="usr_account">{twitter_account}</span>',
  '</div>',
  '</div>',
  '</div>',
  '</tpl>',
  {
    getActiveclass:function(value){
      return (value!=0)?"active":"inactive";
    }
  });

Here, we are creating an instance of the Ext.XTemplate class. In this code, we added a function inside...