PDA

View Full Version : Unable to render panel in Chrome. Works well in Firefox



pulkit110
19 Nov 2011, 2:57 AM
Hello,

I am trying to render a panel. 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.

mitchellsimoens
19 Nov 2011, 1:15 PM
Just tried this and it works:


var contentPanel = {
html : 'hi',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false
};


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

This is your code with some changes. I removed renderTo and title from the Ext.Viewport as they are not supported. I removed the items config in the contentPanel Object as I didn't have that dialog class and to make sure it's rendering added the html config. This rendered fine in Chrome 16.

pulkit110
19 Nov 2011, 2:33 PM
Thanks. The problem was in my dialog.
Sorry!