Bryntum Quiz 12

by Alexander Novikov

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

/*
12. List all the potential issues with the following Ext JS 4 plugin definition:

Ext.define('MyGridPlugin', {

    init : function(grid) { 
        grid.getStore().on({
            load : function() {
                grid.el.highlight(); // Some cool fx to bring attention to the grid
            }
        });
    }
});

// Let’s try it out
var myGrid = new Ext.grid.Panel({
    renderTo : document.body,
    store : someStore,
    plugins : new MyGridPlugin()
});

someStore.load();

*/

// ANSWER:
// 1. The store can be loaded before the grid component is rendered. In this case there is no el property and it can be an issue.


Ext.define('MyGridPlugin', {

    init : function(grid) { 
        grid.getStore().on({
            datachanged : function() {
                 grid.el && grid.el.highlight(); // Some cool fx to bring attention to the grid <-------
            }
        });
    }
});

// Let’s try it out
someStore = Ext.create('Ext.data.Store', {
    fields: [{name: 'name'}]
});

var myGrid = Ext.create('Ext.grid.Panel', {
    //renderTo : Ext.getBody(),
    store : someStore,
    plugins : [
        Ext.create('MyGridPlugin')
    ],
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }]
});

someStore.loadData([
    { name: 'C' },
    { name: 'D' }
]);

myGrid.render(Ext.getBody());