Как создавать вкладки для Tab Panel в ExtJS 4

[Bkmz_1_]

В ExtJS 3 я это делал так

// Новая вкладка
    new Ext.getCmp('content').add({
        title: 'Город ' + CityName,
        closable: true,
        xtype: 'form',
        items: [{
            layout: 'column',
            border: false,
            items:[{
                columnWidth: 0.5,
                layout: 'form',
                border: false,
                bodyStyle: 'padding:10px',
                items: [ TableGoods ]
            },{
                columnWidth: 0.5,
                layout: 'form',
                border: false,
                bodyStyle: 'padding:10px',
                items: [ TableService ]
            }]
        }]
    }).show();

А как мне это сделать в ExtJS 4 который построен на mvc

Я делаю так:

Ext.define('MyApp.controller.Wrapper', {
    extend: 'Ext.app.Controller',

    init: function() {
       this.control({
		'#button-select-city': {
                click: this.onGroups
            }
        });
    },

    onGroups: function() {
        this.getComponent('content').add({
            title: 'Город',
            closable: true,
            xtype: 'form',
            items: [{
               // наш шаблончик, чтобы xtype его видел в шаблончике надо задать параметр alias : 'widget.tab-groups'
               xtype: 'tab-groups'
            }]
       }).show();
    }    

});

Шаблончик view который надо вставить приклике на кнопку.

Ext.define('MyApp.view.tab-groups', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.tab-groups',
    layout: 'column',
    border: 0,
    initComponent: function() {
        this.items = [
            {
                xtype: 'gridpanel',
                itemId: 'grid-goods',
                padding: '10px 5px 10px 10px',
                title: 'Товары',
                store: 'Good',
                columnWidth: 0.5,
                columns: [
                    {
                        dataIndex: 'name',
                        flex: 1,
                        text: 'Товары'
                    },
                    {
                        width: 50,
                        dataIndex: 'count',
                        text: '№'
                    }
                ]
            },
            {
                xtype: 'gridpanel',
                itemId: 'grid-services',
                padding: '10px 10px 10px 5px',
                title: 'Услуги',
                store: 'Service',
                columnWidth: 0.5,
                height: 585,
                columns: [
                    {
                        dataIndex: 'name',
                        flex: 1,
                        text: 'Услуги'
                    },
                    {
                        width: 50,
                        dataIndex: 'count',
                        text: '№'
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});

Как мне эти два файлика привентить?

[Bkmz_1_]

Надо было просто подключить view-шку

views: [
    'tab-groups'
],

Вот здесь

Ext.define('MyApp.controller.Wrapper', {
    extend: 'Ext.app.Controller',

    views: [
        'tab-groups'
    ],

    init: function() {
       this.control({
		'#button-select-city': {
                click: this.onGroups
            }
        });
    },

    onGroups: function() {
        this.getComponent('content').add({
            title: 'Город',
            closable: true,
            xtype: 'form',
            items: [{
               // наш шаблончик, чтобы xtype его видел в шаблончике надо задать параметр alias : 'widget.tab-groups'
               xtype: 'tab-groups'
            }]
       }).show();
    }    

});