Ext JS 中的 Firefox 渲染问题答案

【问题标题】：Firefox rendering issue in Ext JSExt JS 中的 Firefox 渲染问题
【发布时间】：2015-09-08 20:01:51
【问题描述】：

var win = Ext.create('Ext.window.Window', {
         title: "Window",
         modal:true,
         width: 570,
         height: 440,            
         layout: 'card',
         items:[{
                xtype: "panel",
                border: true,
                bodyBorder: true,
                title: 'Panel',
                bodyStyle: {
                        "background": "linear-gradient(to left, #fff , #6799ff)"
                },
                id: 'PanelID',
                items:[{
                        xtype: 'box',
                        id: 'BoxID',
                        title:'Box',
                        width: 558,
                        height: 325,
                        autoEl: {
                            tag: 'iframe'
                        },
                        listeners: {
                            'boxready': function() {

                             var popWindowdoc = Ext.getCmp('BoxID').el.dom.contentDocument;
                             $(popWindowdoc.body).append('<div id="t" tabindex="0"/>');
                            $(popWindowdoc.getElementById('t')).append('This is Test');
                            }
                        }
                }]
            }
         ]


     });

     win.show();

这段代码在 chrome 中运行良好，我的窗口上出现“这是测试”。但在 Firefox 中，我没有收到任何文本，也没有发生错误。我认为这是一个渲染问题。

任何机构让我知道在这种情况下我将如何获取文本？

【问题讨论】：

我遇到了同样的问题，请参考我的问题：stackoverflow.com/questions/31529917/… 我也会尝试回答您的问题，因为这个问题的性质非常微妙。待命....

标签： javascript jquery firefox extjs extjs5

【解决方案1】：

Firefox 会将您的这部分代码分段解释，如果可能的话，您需要重构您的代码，使其只有一组括号[{ ...}] 看看有什么' 2 items？那一定只有 1 个items

 items:[{
            xtype: "panel",
            border: true,
            bodyBorder: true,
            title: 'Panel',
            bodyStyle: {
                    "background": "linear-gradient(to left, #fff , #6799ff)"
            },
            id: 'PanelID',
            items:[{
                    xtype: 'box',
                    id: 'BoxID',
                    title:'Box',
                    width: 558,
                    height: 325,
                    autoEl: {
                        tag: 'iframe'
                    },
                    listeners: {
                        'boxready': function() {

                         var popWindowdoc = Ext.getCmp('BoxID').el.dom.contentDocument;
                         $(popWindowdoc.body).append('<div id="t" tabindex="0"/>');
                        $(popWindowdoc.getElementById('t')).append('This is Test');
                        }
                    }
            }]

【讨论】：