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:
We created the template configuration in
var myTplso that the DataView can use it.We created an instance of the
Ext.view.Viewclass in themyDataviewvariable.Then we added the data source of our view in
step 3.We set the template in the DataView by setting the
tpl:myTplproperty.Finally, we have the
emptyTextproperty, 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...