带导轨的 Extjs -> 视口 - 分布式应用程序中的面板显示问题

Question

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

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

当单独执行时，一切都很好，但是当我将组件集成到主项目时，组件不会像预期的那样在视口上呈现。是否有任何与UI组件相关的父子关系要遵循?是否有其他将面板渲染到视窗的方法?

提前感谢!

p。店员:这里有代码供参考。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();

Answer 1

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

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