Question

This leads on from my previous question here.
I have been developing with ExtJs 3.x for about a year now and I want to migrate to ExtJs4.
I am used to coding my extJs files like below:

ReportsPanel = function(config){
config = config || {};

    function dummyFunction(){
       //I would usually have methods in this file also.
    }

    Ext.apply(config, {
      title: 'Reports',
      layout: 'border',
      id: 'reportsPanel',
      closable: 'true',
      items: []
    });

  ReportsPanel.superclass.constructor.call(this, config);
};
Ext.extend(ReportsPanel, Ext.Panel, {
    dummy: dummyFunction//Make the dummy function available to call
});

And instantiating this with new ReportsPanel() wherever neccessary.

I have looked at many different examples of ExtJs 4 code and to be honest I’m a little confused.
I know that I should be using the Ext.define method. I just cant seem to get my head around it.
What should the above example converted into ExtJs4 look like?

Answer 1

It could look like this:

Ext.define('ReportsPanel', {
    extend: 'Ext.panel.Panel',

    // default parameters
    title: 'Reports',
    layout: 'border',
    closable: true,

    // custom variables.
    foo: 'my var',
    bar: 'baz',

    constructor: function(config) {
        // ... do something in constructor if you need.


        this.callParent(arguments);
    },

    dummyFunction: function(){
        this.foo = 'bar';
        this.bar = 'my var';
    }
});