Guide applies to: modern

    A dataview renders a template for every record in a store. The items can be associated with a CSS style. You can bind to the dataview’s selection, and listen to events.

    • itemCls is applied to each item
    • overItemCls is applied as you mouse over an item

    • selectedItemCls is applied when you select an item

      Expand Code

      JS Run

      1.   Ext.define('MyApp.view.Main', {
      2.       //extend: 'Ext.view.View', // classic
      3.       extend: 'Ext.dataview.DataView', // modern
      5.   itemTpl: '<img src="{image}">',
      6.   cls: 'movies',
      7.   itemCls: 'movie',
      8.   overItemCls: 'over',
      9.   selectedItemCls: 'selected',
      11.   listeners: {
      12.       itemtap: function(view, record){
      13.           // You could listen to select too, but that's only fired as the selection
      14.           // changes, so you wouldn't detect clicking on the same item twice.
      15.           Ext.toast({
      16.               html: 'You clicked on ' + record.get('movie'),
      17.               align: 't'
      18.           });
      19.       }
      20.   },
      22.   store: {
      23.       model: getModel(),
      24.       autoLoad: true
      25.   },
      26.   emptyText: 'An Internet connection is needed to load titles from iTunes.'
      27.   });
      28.   Ext.application({
      29.       name: 'MyApp',
      30.       mainView: 'MyApp.view.Main'
      31.   });
      33.   function getModel(){
      34.   Ext.define('MyApp.model.Movie', {
      35.       extend: 'Ext.data.Model',
      36.       fields: [{
      37.           name: 'id',
      38.           mapping: 'id.attributes["im:id"]'
      39.       }, {
      40.           name: 'movie',
      41.           mapping: '["im:name"].label'
      42.       }, {
      43.           name: 'image',
      44.       mapping: '["im:image"][2].label'
      45.       }],
      46.       proxy: {
      47.           type: 'jsonp',
      48.           url: 'https://itunes.apple.com/us/rss/topmovies/limit=5/json',
      49.           reader: {
      50.               type: 'json',
      51.               rootProperty: 'feed.entry'
      52.           }
      53.       }
      54.   });
      55.   return 'MyApp.model.Movie';
      56.   }