O'Reilly logo

Learning Ext JS - Fourth Edition by Armando Gonzalez, Crysfel Villa, Carlos A. Méndez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required