Extjs 与 Rails -> Viewport - 分布式应用程序中的面板显示问题

Question

我正在使用 ExtJS 和 Rails 开发类似桌面的应用程序，其中几个人同时处理应用程序的不同部分。

以下是该应用程序的简要描述： 主屏幕显示在视口上，有 4 个部分 - 北、南、​​中、西。 西部区域包含一些按钮，单击按钮会添加/打开新选项卡。选项卡内容显示在视口的中心区域，其中包含一个具有表单面板或网格面板（子级）的面板（父级）。

单独执行时一切正常，但是当我将组件集成到主项目时，组件不会按预期渲染在视口上。 UI组件相关的父子关系是否有可遵循的？有没有替代视口的渲染面板？

提前致谢！

PS：这是参考代码。测试1（主/父控制器），单元（子控制器）

//** 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();

Answer 1

我找到了解决我自己问题的方法。 IE 将“注释”行解释为某个脚本，删除该脚本解决了问题。 IE 是罪魁祸首:|

但 Chrome 仍然存在一些问题。当我在index.html页面中包含Ext js文件时，Chrome第一次加载时会抛出“未捕获的引用错误”，否则它工作正常......