Guide applies to: modern

1.Create the Modern Grid class

Create a new file app/desktop/src/view/TunesGrid.js with the following code. Note the xtype.

        Ext.define('ModernTunes.view.TunesGrid', {
            extend: 'Ext.grid.Grid',
            xtype: 'tunesgrid',
            cls: 'tunes-grid'
        });

2.In MainView.js, add an Instance of TunesGrid

• Replace the html placeholder we had for the dataview in the items array for Grid with the xtype assigned to the TuneGrid class, called tunesgrid.

    xtype: 'tunesgrid',

• bind its store property to the '{tunes}' setting from the MainView’s viewModel

 bind: {
          store: '{tunes}'
      }

3.Add Columns to the Grid

• Return to edit app/desktop/src/view/TunesGrid.js and add the following after the xtype setting:

    defaults: {
            height: 54
    },
    columns: [{
        text: 'Artist',
        dataIndex: 'artist',
        flex: 1
    }, {
        text: 'Title',
        dataIndex: 'title',
        flex: 1
    }, {
        text: 'Release Date',
        dataIndex: 'release_date',
        flex: .5
    }, {
        text: 'Thumbnail',
        dataIndex: 'image',
        tpl: '<div class="grid-image" style="background-image:url(\'{image}\')"></div>',
        cell: {
            encodeHtml: false
        }
    }],

• The dataIndex config on each cell is referencing a field in the feed to populate that column, accessible due to the proxy.

Since you are adding these column and cell types, their source classes need to be added to the requires array to be included in the build:

    requires: [
        'Ext.grid.column.Column',
        'Ext.grid.cell.*'
    ],

When you are finished, save your work and refresh the browser (running as a modern app). You should see the grid when clicking the second tab.

4.Using Tpl and Cell Configs to Render an Image to a Column

• The first 3 columns are straightforward displays of content in the column of a grid

• Cells are the defining element for content in a grid rendered from the Modern Toolkit

• On that fourth cell we are using a tpl config to inject HTML and CSS on the data available to the dataIndex property so that the image field’s value can be used to render an image to the Thumbnail column

        cell: {
            encodeHtml: false
        },

• The above config allows for the execution of HTML in the cell to display an image rather than the literal text of the img tag code being displayed.

5.Add a Style sheet for the Grid

These styles will tweak the grid to provide proper sizing and consistent spacing for the images in the Thumbnails column, among other things.

Again, make sure you create the stylesheet the same as the class file and save it in the same directory with an .scss extension, app/desktop/src/view/TunesGrid.scss.

To recognize the classes being used, see the cls config on the grid (tunes-grid) class and the class settings in the template column (grid-image).

.tunes-grid {
    background-color: #eeeeee;
    transition: filter 250ms;
    .grid-image {
        width: 100%;
        height: 30px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}
.blur .tunes-grid {
    filter: blur(5px) grayscale(80%);
}

6.The code

The file TunesGrid.js should have ended up looking something like this:

Ext.define('ModernTunes.view.TunesGrid', {
    extend: 'Ext.grid.Grid',
    xtype: 'tunesgrid',
    cls: 'tunes-grid',
    requires: [
        'Ext.grid.column.Column',
        'Ext.grid.cell.*'
    ],
    defaults: {
        height: 54
    },
    columns: [{
        text: 'Artist',
        dataIndex: 'artist',
        flex: 1
    }, {
        text: 'Title',
        dataIndex: 'title',
        flex: 1
    }, {
        text: 'Release Date',
        dataIndex: 'release_date',
        flex: .5
    }, {
        text: 'Thumbnail',
        dataIndex: 'image',
        tpl: '<div class="grid-image" style="background-image:url(\'{image}\')"></div>',
        cell: {
            encodeHtml: false
        }
    }]   
});

When you are finished, save your work and refresh the browser. You should see the grid when clicking the second tab.

• This snapshot uses the mobile simulator in the Chrome browser in order to render the phone pic