Question

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

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

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

提前致谢！

P.S：这是代码供参考。 Test1（主/父控制器），单元（子控制器）

//** 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首次加载时会抛出“未捕获的参考错误”，否则它会正常工作...

带有Rails的Extjs - ＆gt;视口 - 分布式应用程序中的面板显示问题

1 个答案: