Q:

Unable to render panel in Chrome. Works well in Firefox

I am trying to render a panel in extJS 3.4.0. It works well in Firefox but gives the following error when I try it in Chrome:

Uncaught TypeError: Cannot call method 'applyStyles' of null
  Ext.Panel.Ext.extend.createElementext-all-debug.js:17057
  Ext.Panel.Ext.extend.onRenderext-all-debug.js:17127
  Ext.FormPanel.Ext.extend.onRenderext-all-debug.js:43353
  Ext.extend.renderext-all-debug.js:10763
  Ext.layout.ContainerLayout.Ext.extend.renderItemext-all-debug.js:13191
  Ext.layout.AccordionLayout.Ext.extend.renderItemext-all-debug.js:14823
  Ext.layout.ContainerLayout.Ext.extend.renderAllext-all-debug.js:13182
  Ext.layout.ContainerLayout.Ext.extend.onLayoutext-all-debug.js:13168
  Ext.layout.FitLayout.Ext.extend.onLayoutext-all-debug.js:13383
  Ext.layout.ContainerLayout.Ext.extend.layoutext-all-debug.js:13162
  Ext.layout.ContainerLayout.Ext.extend.runLayoutext-all-debug.js:13271
  Ext.layout.ContainerLayout.Ext.extend.onResizeext-all-debug.js:13265
  EXTUTIL.Event.fireext-all-debug.js:310
  EXTUTIL.Observable.fireEventext-all-debug.js:54
  Ext.Panel.Ext.extend.onBodyResizeext-all-debug.js:17670
  Ext.Panel.Ext.extend.onResizeext-all-debug.js:17661
  Ext.BoxComponent.Ext.extend.setSizeext-all-debug.js:12164
  Ext.layout.FitLayout.Ext.extend.setItemSizeext-all-debug.js:13392
  Ext.layout.FitLayout.Ext.extend.onLayoutext-all-debug.js:13385
  Ext.layout.ContainerLayout.Ext.extend.layoutext-all-debug.js:13162
  Ext.layout.CardLayout.Ext.extend.setActiveItemext-all-debug.js:13440
  Ext.Container.Ext.extend.afterRenderext-all-debug.js:12738
  Ext.Panel.Ext.extend.afterRenderext-all-debug.js:17414
  Ext.extend.renderext-all-debug.js:10802
  Ext.layout.BorderLayout.Ext.extend.onLayoutext-all-debug.js:13768
  Ext.layout.ContainerLayout.Ext.extend.layoutext-all-debug.js:13162
  Ext.Container.Ext.extend.doLayoutext-all-debug.js:12969
  Ext.Container.Ext.extend.afterRenderext-all-debug.js:12743
  Ext.extend.renderext-all-debug.js:10802
  Ext.Componentext-all-debug.js:10641
  Ext.apply.extend.sbext-base-debug.js:246
  Ext.apply.extend.sbext-base-debug.js:246
  Ext.apply.extend.sbext-base-debug.js:246 (anonymous
  function)Ydee.js:27 EXTUTIL.Event.nameext-all-debug.js:190
  callext-all-debug.js:1459

The code that I have used is: 
var userDlg = new myDialog();

    var contentPanel = {
        id: 'content-panel',
        region: 'center',
        layout: 'card',
        margins: '2 5 5 0',
        activeItem: 0,
        border: false,
        items: userDlg
    };

    var viewport = new Ext.Viewport({
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [contentPanel],
        renderTo: Ext.getBody()
    });

Can anyone point out the error?
Thanks in advance.

A:

The problem was because I was rendering FormPanel inside Viewport instead of Panel. 
Accordion layout wasn't functioning in FormPanel. When I changed it to Panel, it started working. 
I am not sure why firefox wasn't complaining though. 

