将 ExtJs3 转换为 ExtJs4？

Question

这源于我之前的问题此处。
我使用 ExtJs 3.x 进行开发已经大约一年了，我想迁移到 ExtJs4。
我习惯于对 extJs 文件进行如下编码：

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

并在必要时使用 new ReportsPanel() 实例化它。

我看过许多不同的 ExtJs 4 代码示例，说实话我有点困惑。
我知道我应该使用 Ext.define 方法。我似乎无法理解它。
上面的例子转换成 ExtJs4 应该是什么样子？

Answer 1

它可能看起来像这样：

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