Handling events in DataView

Once we have our DataView defined, we are going to see some basic event handling for it. To do this, we need to add some new properties to our view definition so that we can assign events:

  var myDataview = Ext.create('Ext.view.View', {
    store: myStore,
    tpl: myTpl,
    padding: 6,
    itemSelector: 'div.user', //Step 1
    emptyText: '<b>No users available</b>'
  });

We added the itemSelector property (Step 1). It defines which DOM node item will be used to select each item (data model) with which the DataView will be working.

You can use CSS selectors to define the itemSelector property.

And now, let's add the event listener:

var myDataview = Ext.create('Ext.view.View', {
store: myStore,
  tpl: myTpl,
  padding: 6,
  itemSelector: 'div.user',
  emptyText: '<b>No users available</b>',
  listeners: {
    itemclick: {
      fn:function( view, record, item, index, evt, eOpts ){
        Ext.Msg.alert(
          "Dataview record selected...