Using the lightweight ListView class

The new ListView class is a high-performance, lightweight implementation of a grid-like display. In this recipe, we use it to display a read-only list of movies as shown in the following screenshot:

How to do it...

1. 1. Create a data store for the movies list view:

   var store = new Ext.data.JsonStore({
   url: 'grid-listview.php',
   root: 'movies',
   idProperty: 'id',
   totalProperty: 'count',
   fields: ['id', 'title', 'category', 'rating',
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float' }, 'description']
   });
   store.setDefaultSort('title', 'asc');
   

2. 2. Define the movies list view:

   Ext.onReady(function() {
   var moviesListView = new Ext.ListView({
   store: store,
   multiSelect: false,
   emptyText: 'No images to display',
   reserveScrollOffset: true,
   loadingText: 'Loading movies...',
   columns: [{
   header: 'Title',
   width: .4,
   dataIndex: 'title'
   }, {
   header: 'Category',
   width: .15,
   dataIndex: 'category'
   }, {
   header: 'Rating',
   dataIndex: 'rating',
   width: .15,
   align: 'right...