Converting ExtJs3 to ExtJs4? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that 开发者_StackOverflowit can be reopened, visit the help center. Closed 11 years ago.

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?

---

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';
    }
});