Extjs с Rails -> Viewport — проблема с отображением панели в распределенном приложении

Я работаю над настольным приложением, используя ExtJS с Rails, где одновременно несколько человек работают над разными частями приложения.

Вот краткое описание приложения: главный экран отображается в области просмотра, которая имеет 4 секции - север, юг, центр и запад. Западная область содержит несколько кнопок, нажатие на кнопку приводит к добавлению/открытию новой вкладки. Содержимое вкладки отображается в центральной области окна просмотра, которое содержит панель (родительскую), имеющую панель формы или панель сетки (дочернюю).

Все работает нормально при индивидуальном выполнении, но когда я интегрирую компоненты в основной проект, компоненты не отображаются в окне просмотра, как ожидалось. Существуют ли какие-либо отношения родитель-потомок, связанные с компонентами пользовательского интерфейса, которым необходимо следовать? Есть ли альтернативы рендеринга панели во вьюпорте?

Заранее спасибо!

P.S. Вот код для справки. Test1 (основной/родительский контроллер), Unit (дочерний контроллер)

//** MyViewport.js in Test1 Controller **//

    var unit_bt =Ext.getCmp('btnUnit');
       unit_bt.on('click', function(){
       var unit_el =Ext.getCmp('tabcon');
       var tab = unit_el.getItem('tab_unit');
       if(tab)
       {
           tab.show();
       }else{
            unit_el.add({
                title    : 'Unit of Measurement',
                html     : 'I am new unit',
                activeTab: 0,
                closable : true ,
                id: 'tab_unit',
                autoLoad:{url:'/units',scripts:true}
                //store.load({params:{start:0, limit:25}})

            }).show();
            }
       });

//** Unit UI.js in Units Controller **//

MyUnitUi = Ext.extend(Ext.Panel, {
    title: '',
    width: 451,
    height: 446,
    initComponent: function() {
        this.items = [
            {
                xtype: 'editorgrid',
                title: '',
                store: 'MyUnitStore',
                url : '/units.json',
                id: 'maingrid',
                selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),

                width: 441,
                height: 300,
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'unitname',
                        header: 'Unit Name',
                        sortable: true,
                        width: 100,
                        editor: {
                            xtype: 'textfield'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'description',
                        header: 'Description',
                        sortable: true,
                        width: 100,
                        editor: {
                            xtype: 'textfield'
                        }
                    }
                ]
            },
            {
                xtype: 'form',
                title: 'My Form',
                id: 'myform',
                standardSubmit: true,
                height: 300,
                hidden: true,
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Unit Name',
                        id: 'unitname',
                        name:'data[unitname]',
                        anchor: '100%',

                        width: 70,
                        x: 150,
                        y: 30,
                        region: 'center',
                        autoWidth: true
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Description',
                        anchor: '100%',
                        id: 'description',
                        name:'data[description]',
                        x: 150,
                        y: 75,
                        region: 'west',
                        width: 70,
                        autoWidth: true
                    }
                ]
            }
        ];
        this.tbar = {
            xtype: 'toolbar',
            height: 45,
            items: [
                {
                    xtype: 'button',
                    text: 'ADD',
                    height: 45,
                    width: 100,
                    id: 'btnAdd'
                },
                {
                    xtype: 'button',
                    text: 'UPDATE',
                    height: 45,
                    width: 100,
                    id: 'btnUpdate'
                },
                {
                    xtype: 'button',
                    text: 'DELETE',
                    height: 45,
                    width: 100,
                    id: 'btnDelete'
                },
                {
                    xtype: 'button',
                    text: 'SAVE',
                    hidden: true,
                    id: 'btnSave',
                     type: 'submit'
                },
                {
                    xtype: 'button',
                    text: 'CANCEL',
                    hidden: true,
                    id: 'btnCancel'
                }
            ]
        };
        MyUnitUi.superclass.initComponent.call(this);
    }
});

//** myunitstore.js in Units Controller **//

            Ext.data.Api.restActions = {
            //create  : 'POST',
            //read    : 'GET',
            update  : 'PUT'
            //destroy : 'DELETE'
            };
    MyUnitStore = Ext.extend(Ext.data.JsonStore, {
       constructor: function(cfg) {
        cfg = cfg || {};
        MyUnitStore.superclass.constructor.call(this, Ext.apply({
            idProperty:  'id',
            storeId: 'MyUnitStore',
            root: 'data',
            autoLoad: true,
            autoSave: false,
            restful:true,
            writer: new Ext.data.JsonWriter({
                encode : false,
                listful:false
            }),
             url: '/units.json',
             fields: [
             {
                    name: 'unitname'
                },
                {
                    name: 'description'
                }
             ] ,
           listeners: {
               load:function(){
                   Ext.MessageBox.alert("listener");
               },
           exception: function(proxy, type, action, o, response, args) {
               var jsonData = Ext.util.JSON.decode(response.responseText);
               //Ext.MessageBox.alert("hello");
                Ext.MessageBox.alert('Error Occurred', jsonData.message);

           }
        }//end listeners
        }, cfg));
    }

});
new MyUnitStore();