Convert ExtJs3 to ExtJs4?

Question

This leads to my previous question here .
I have been developing with ExtJs 3.x for about a year, and I want to upgrade to ExtJs4.
I am used to coding my extJs files as shown 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 instantiate with new ReportsPanel() wherever needed.

I looked at many different ExtJs 4 code examples, and to be honest, I'm a little confused.
I know I have to use the Ext.define method. I just cant seem to hug him. What should the above example look like in ExtJs4?

Answer 1

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