A basic DataView

Now, that we have our data connection set, we are going to define the view of our application:

//Step 1
var myTpl = [
'<tplfor=".">',
'<div class="user">{firstName} {lastName}</div>',
'</tpl>'
].join('');
//Step 2
var myDataview = Ext.create('Ext.view.View', {
  store: myStore, //step 3
  tpl: myTpl,     //step 4
  padding:6,
  emptyText: '<b>No users available</b>'
});

In the previous code, we defined our user's DataView. So, let's see the code step by step:

1. We created the template configuration in var myTpl so that the DataView can use it.

2. We created an instance of the Ext.view.View class in the myDataview variable.

3. Then we added the data source of our view in step 3.

4. We set the template in the DataView by setting the tpl:myTpl property.

5. Finally, we have the emptyText property, which is text to be displayed when our view has nothing to show (no records).

Once we have our data connection and view defined, we are ready to write the code for...