Extjs with Rails -> Viewport - Panel display problem in distributed application

I am working on desktop-like application using ExtJS with Rails where simultaneously several persons are working on different parts of the application.

Here is the brief description of the application : The main screen is displayed on the viewport that has 4 sections - north,south,center and west. The west region contains some buttons, clicking on the button results in adding/opening of a new tab. The tab content is displayed in the center region of the viewport, which contains a Panel (Parent) having a form panel or a grid panel (Child).

Everything works fine when executed individually, but when I integrate the components to the main project, the components don't get rendered on the viewport as expected. Is there any parent-child relationship related to UI components to be followed? Are there any alternatives of rendering panel to the viewport?

Thanks in advance!

P.S : Here's code for reference. Test1 ( Main/Parent Controller), Unit (Child Controller)

//** 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: 1开发者_开发知识库00,
                    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();

---

I found the solution to my own problem. IE was interpreting a 'commented' line as some script, removing the script solved the issue. IE was the culprit :|

But still there's some issue with Chrome. When I include the Ext js files in the index.html page, Chrome throws "Uncaught Reference error" for the first time it loads, otherwise it works fine...