bad.js

Ext.define("Facade.view.desktop.Desktop",{
  extends: 'Ext.container.Viewport',
  alias: 'desktop-Desktop',

  requires: [
  'Facade.view.desktop.app.Banner',
  'Facade.view.desktop.app.Container'
  ],
  id: 'viewport',
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  style: 'background: #DFE8F6',
  items: [
    Ext.create('Facade.view.desktop.app.Banner'),
    Ext.create('Facade.view.desktop.app.Container')
  ]
});

better.js

Ext.define("Facade.view.desktop.Desktop",{
  extends: 'Ext.container.Viewport',
  alias: 'desktop-Desktop',

  id: 'viewport',
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  style: 'background: #DFE8F6',
  items: [
    { xtype: 'desktop-app-Banner' },
    { xtype: 'desktop-app-Container' }
  ]
});

optimal.js

Ext.define("Facade.view.desktop.Desktop",{
  extends: 'Ext.container.Viewport',
  alias: 'desktop-Desktop',

  initComponent: function() {
    Ext.apply(this, {
      id: 'viewport',
      layout: {
        type: 'vbox',
        align: 'stretch'
      },
      style: 'background: #DFE8F6',
      items: [
        { xtype: 'desktop-app-Banner' },
        { xtype: 'desktop-app-Container' }
      ]
    });
  }
});

Easy example:

Ext.define('Testclass', {
    items: [1, 2],
    foo: 'bar',

    testik: function() {
      this.foo = 'baz';
      this.items[0] = 9;
    }
});

var one = Ext.create('Testclass'),
  two = Ext.create('Testclass');

one.testik();
console.log(one.foo); // #=> baz 
console.log(one.items); //#=> [9, 2]
console.log(two.foo); // #=> bar
console.log(two.items); //#=> [9, 2] oops ;-)

"testik"? :)

Sounds familiar? :-)