Bryntum Quiz 7

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

/*
7. What is wrong with the following Ext JS 4 class definition:
Ext.define('MyPanel', {
    extend : 'Ext.Panel',

    sayHello : function() { console.log('Hello world'); },

    tbar : [
        { 
            text : 'Click to say hello',
            handler : this.sayHello,
            scope : this
        }
    ],
    ... // stores, columns defined below
});
*/

Ext.define('MyPanel', {
    extend : 'Ext.grid.Panel', //<---- Ext.grid.Panel or Ext.panel.Panel

    sayHello : function() { console.log('Hello world'); },

    initComponent: function() {
        
        this.tbar = [
            { 
                text : 'Click to say hello',
                handler : this.sayHello,
                scope : this // <----- has meaning in a component instance
            }
        ]
        
        this.callParent();
    },
    
    // stores, columns defined below
    
    columns: [{ text: 'Name',  dataIndex: 'name' }]    
});

var myPanel = Ext.create('MyPanel', {
    renderTo: Ext.getBody()
});
myPanel.show();