Cannot read property 'items' of undefined
 

Доброго времени суток, только начал осваивать ExtJs, бьюсь над примером, но пока безрезультатно.
Пример отсюда http://clck.ru/4RGOe

Ext.define('App',{ //Определяем класс App
    statics:{  //Статическое содержимое класса   
		    	
        init:function(){
            Ext.Loader.setConfig({ //Конфигурация загрузчика скриптов
                enabled:true,  //Загрузчик активен
                disableCaching:true,   //Не кеширует файоы
                paths:{
                    'Base':'js/Base', //Путь в пространству данных Base
                    'People':'js/People'
                }
            
            });
            
            Ext.create('Base.Viewport');
            this.content = this.viewport.items.items[2];

        },
		setContent:function(content){
		    this.content.removeAll();
		    this.content.update('');
		    this.content.add(content);
		}
    }
});

Ошибка в строке

this.content = this.viewport.items.items[2];

Ругается, что не знает такого свойства items, хотя Base.Viewport наследник Ext.container.Viewport, а у последнего такое свойство есть http://docs.sencha.com/ext-js/4-1/#!...property-items
Уже вместо this подставлял имя класса, все равно не работает. И на сайте автора примера никакой обратной связи нет. Заранее спасибо за помощь.
Вот на всякий пожарный файл Viewpost.js

Ext.define('Base.Viewport', { //Определяем новый класс
    extend:'Ext.container.Viewport',
    layout: 'border',
    items: [{ //Что вы нем будет
        region: 'north',  //Где будет находиться компонет?
        html: '<h1 class="x-panel-header">systema otdela kadrov</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        title: 'Menu',
        width: 150
 
    }, {
        region: 'center',
        xtype: 'container',
 
        html: 'Soderjimoe',
        style:{
            background: '#fff'
        },
        padding:10
 
    }],
	initComponent:function(){
	    this.callParent(arguments); //Инициализация компонента
	    this.onComplete(); //Вызов метода после готовности компонента
	},
	onComplete:function(){
	    this.menu = this.items.items[1];
	//Находим контейнер для меню и запоминаем его
	    this.menu = this.menu.add(Ext.create('Base.Menu'));
	//Загружаем в контейнер меню, и меню заносим в ту же переменную
	    this.menu.store.loadData([{
	//Метод подгружает в store информацию, которая нужна для создания меню
	    	src:'img/Avatar.png',
            caption:'Sotrudniki',
            action:function(){
              App.setContent(Ext.create('People.Everybody'));
             }  
            	
	    },{
	        src:'img/Avatar.png',
	        caption:'News',
	        action:function(){alert('News');}
	    }]);
	}
});

Заработало следующим образом: вместо 15, 16 строк

VievportForm = Ext.create('Base.Viewport');
            this.content = VievportForm.items.items[2];

однако если кто-нибудь все же ответит должен ли был работать(и главоное почему) первоначальный код буду признателен.

Разберитесь со statics

Ext.onReady(function() {
  Ext.define("TestClassWithStatics", {
    statics: {
      staticProp: "staticProperty"
    }
  });

  var
    o = Ext.create("TestClassWithStatics");

  alert(TestClassWithStatics.staticProp);
  alert(o.staticProp);
});

http://jsfiddle.net/ENqea/