Bryntum Quiz 8

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

/*
8. The hypothetical grid class below has special attribute “rowColors” and can update it dynamically using “setRowColor”. What is problematic with this implementation?

Ext.define('MyGrid', {
    extend : 'Ext.grid.Panel',

    // Row coloring for normal and alternate rows
    rowColors : { 
        normal    : ‘blue’,
        alternate : ‘white’
    },

   // Updates the grid row colors
   setRowColors : function(normal, alternate) { 
       this.rowColors.normal = normal;
       this.rowColors.alternate = alternate; 
       this.getView().refresh(); 
   },
   ...
});
*/

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',

    // Row coloring for normal and alternate rows
    initComponent: function() {
      this.rowColors = {
          normal: 'blue',
          alternate: 'white'
      };
    	this.callParent();
    },

    // Updates the grid row colors
    setRowColors: function (normal, alternate) {
        this.rowColors.normal = normal;
        this.rowColors.alternate = alternate;
        this.getView().refresh();
    },
    //...

    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }]

});

var myGrid1 = Ext.create('MyGrid', {
    renderTo: Ext.getBody()
});
myGrid1.setRowColors('black', 'yellow');

var myGrid2 = Ext.create('MyGrid', {
    renderTo: Ext.getBody()
});
myGrid2.setRowColors('green', 'brown');

console.log('Grid instance No.1 has black and yellow');
console.log(myGrid1.rowColors);
console.log('Grid instance No.2 has green and brown');
console.log(myGrid2.rowColors);