Learning Ext JS

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. ...