Firefox rendering issue in Ext JS

Question

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

This code is working well in chrome and i am getting "This is Test" on my window. But in firefox I am not getting any text and no error is occurring . I think it is a render issue.

Any body let me know how i will get text in this condition ?

Answer 1

Firefox will interpret this portion of your code fragmented, if at all possible you need to refactor your code in a way that there's only one set of brackets [{ ...}] See how there' 2 items? That's got to be only 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');
                        }
                    }
            }]