1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    pulkit110 is on a distinguished road

      0  

    Question Unable to render panel in Chrome. Works well in Firefox

    Unable to render panel in Chrome. Works well in Firefox


    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:
    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,032
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just tried this and it works:

    Code:
        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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    pulkit110 is on a distinguished road

      0  

    Default


    Thanks. The problem was in my dialog.
    Sorry!

Thread Participants: 1

Tags for this Thread