Bryntum Quiz 9

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">
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

JavaScript

/*
9. What is wrong with the following Ext JS 4 class definition:

Ext.define('ReusableButton', {
    extend : 'Ext.Button',
       
    initComponent : function() {
        this.id = ‘reusable-button’;  // So we can use Ext.getCmp
        this.callParent();
    }
});

Ext.define('ReusablePanel', {
    extend : 'Ext.Panel',

    initComponent : function() {
        this.buttons = [
            new ReusableButton({
                 text : ‘Click me’
            })
        ];
        this.callParent();
    },
    ...
})

*/

Ext.define('ReusableButton', {
    extend : 'Ext.button.Button', // <------- here
    alias: 'widget.reusablebutton',
    initComponent : function() {
        //this.id = 'reusable-button';  // So we can use Ext.getCmp <--- there is some contradiction between _id_ inside the class definition and the class name _reusable_
        this.callParent();
    }
});

Ext.define('ReusablePanel', {
    extend : 'Ext.panel.Panel', // <------- here

    initComponent: function() {
        this.buttons = [
            Ext.create('ReusableButton', { // <----- name space Ext
                text : 'Click me',
                itemId: 'reusable-button' // <---
            })
        ];
        this.callParent();
    }
});

Ext.create('ReusablePanel', {
    renderTo: Ext.getBody()
}).show();