1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    33
    Vote Rating
    0
    Nightwish is on a distinguished road

      0  

    Default IE8 not rendering tree nodes

    IE8 not rendering tree nodes


    I've got a simple tree - nothing groundbreaking, works perfectly fine in Firefox and fails miserably in IE8. No JavaScript errors are shown - the tree simply doesn't render any nodes.

    Here's the tree code:

    Code:
    MyPanel7Ui = Ext.extend(Ext.tree.TreePanel, {
        title: 'Data',
        rootVisible: false,
        autoScroll: true,
        autoShow: true,
        id: 'DataTree',
        initComponent: function() {
            this.root = {
                text: 'Tree Node',
                singleClickExpand: true
            };
            this.loader = {
                url: '/sd/ajax/tree.aspx',
                requestMethod: 'GET',
                preloadChildren: true
            };
            MyPanel7Ui.superclass.initComponent.call(this);
        }
    });
    The ajax call to load the tree data is made and comes back - I've traced it with Fiddler. Here's the actual response:

    Code:
    HTTP/1.1 200 OK
    Server: Microsoft-IIS/5.1
    Date: Tue, 05 Oct 2010 19:14:25 GMT
    X-Powered-By: ASP.NET
    X-AspNet-Version: 2.0.50727
    Cache-Control: private
    Content-Type: text/plain; charset=utf-8
    Content-Length: 7169
    
    [
    {
    id: 2010,
    text: '2010 Data',
    iconCls: 'tabEpisodeList',
    cls: 'nodeYear',
    singleClickExpand: true,
    expanded: true,
    children: [
    {
    id: '10/2010',
    text: 'October',
    iconCls: 'uncertified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/10',
    },
    {
    id: '9/2010',
    text: 'September',
    iconCls: 'uncertified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/09',
    },
    {
    id: '8/2010',
    text: 'August',
    iconCls: 'uncertified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/08',
    },
    {
    id: '7/2010',
    text: 'July',
    iconCls: 'uncertified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/07',
    },
    {
    id: '6/2010',
    text: 'June',
    iconCls: 'uncertified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/06',
    },
    {
    id: '5/2010',
    text: 'May',
    iconCls: 'uncertified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/05',
    },
    {
    id: '4/2010',
    text: 'April',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/04',
    },
    {
    id: '3/2010',
    text: 'March',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/03',
    },
    {
    id: '2/2010',
    text: 'February',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/02',
    },
    {
    id: '1/2010',
    text: 'January',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2010/01',
    }
    ]
    },
    {
    id: 2009,
    text: '2009 Data',
    iconCls: 'tabEpisodeList',
    cls: 'nodeYear',
    singleClickExpand: true,
    expanded: false,
    children: [
    {
    id: '12/2009',
    text: 'December',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/12',
    },
    {
    id: '11/2009',
    text: 'November',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/11',
    },
    {
    id: '10/2009',
    text: 'October',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/10',
    },
    {
    id: '9/2009',
    text: 'September',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/09',
    },
    {
    id: '8/2009',
    text: 'August',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/08',
    },
    {
    id: '7/2009',
    text: 'July',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/07',
    },
    {
    id: '6/2009',
    text: 'June',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/06',
    },
    {
    id: '5/2009',
    text: 'May',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/05',
    },
    {
    id: '4/2009',
    text: 'April',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/04',
    },
    {
    id: '3/2009',
    text: 'March',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/03',
    },
    {
    id: '2/2009',
    text: 'February',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/02',
    },
    {
    id: '1/2009',
    text: 'January',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2009/01',
    }
    ]
    },
    {
    id: 2008,
    text: '2008 Data',
    iconCls: 'tabEpisodeList',
    cls: 'nodeYear',
    singleClickExpand: true,
    expanded: false,
    children: [
    {
    id: '12/2008',
    text: 'December',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/12',
    },
    {
    id: '11/2008',
    text: 'November',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/11',
    },
    {
    id: '10/2008',
    text: 'October',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/10',
    },
    {
    id: '9/2008',
    text: 'September',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/09',
    },
    {
    id: '8/2008',
    text: 'August',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/08',
    },
    {
    id: '7/2008',
    text: 'July',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/07',
    },
    {
    id: '6/2008',
    text: 'June',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/06',
    },
    {
    id: '5/2008',
    text: 'May',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/05',
    },
    {
    id: '4/2008',
    text: 'April',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/04',
    },
    {
    id: '3/2008',
    text: 'March',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/03',
    },
    {
    id: '2/2008',
    text: 'February',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/02',
    },
    {
    id: '1/2008',
    text: 'January',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2008/01',
    }
    ]
    },
    {
    id: 2007,
    text: '2007 Data',
    iconCls: 'tabEpisodeList',
    cls: 'nodeYear',
    singleClickExpand: true,
    expanded: false,
    children: [
    {
    id: '12/2007',
    text: 'December',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/12',
    },
    {
    id: '11/2007',
    text: 'November',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/11',
    },
    {
    id: '10/2007',
    text: 'October',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/10',
    },
    {
    id: '9/2007',
    text: 'September',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/09',
    },
    {
    id: '8/2007',
    text: 'August',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/08',
    },
    {
    id: '7/2007',
    text: 'July',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/07',
    },
    {
    id: '6/2007',
    text: 'June',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/06',
    },
    {
    id: '5/2007',
    text: 'May',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/05',
    },
    {
    id: '4/2007',
    text: 'April',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/04',
    },
    {
    id: '3/2007',
    text: 'March',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/03',
    },
    {
    id: '2/2007',
    text: 'February',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/02',
    },
    {
    id: '1/2007',
    text: 'January',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2007/01',
    }
    ]
    },
    {
    id: 2006,
    text: '2006 Data',
    iconCls: 'tabEpisodeList',
    cls: 'nodeYear',
    singleClickExpand: true,
    expanded: false,
    children: [
    {
    id: '12/2006',
    text: 'December',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2006/12',
    },
    {
    id: '11/2006',
    text: 'November',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2006/11',
    },
    {
    id: '10/2006',
    text: 'October',
    iconCls: 'certified',
    cls: 'nodeMonth',
    leaf: true,
    href: '/2006/10',
    },
    ]
    }
    ]
    Anyone have ideas what's going on here? Am I missing a setting; is the MIME type wrong? Could this be an actual bug in the ExtJS code?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    98
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    How are you using the tree? Does it get a fixed height?

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    33
    Vote Rating
    0
    Nightwish is on a distinguished road

      0  

    Default


    Hi Condor,

    The tree does not have a fixed height. Here's the order in which tree and other panels are nested:

    TreePanel (as tab) -> TabPanel -> Container (West) -> Viewport

    The complete code for this sequence is below:

    Code:
    MyContainer1Ui = Ext.extend(Ext.Container, {
        region: 'west',
        width: 250,
        margins: '5 0 5 5',
        cmargins: '5 0 0 5',
        split: true,
        collapseMode: 'mini',
        layout: 'border',
        initComponent: function() {
            this.items = [
                {
                    xtype: 'tabpanel',
                    region: 'center',
                    width: 250,
                    autoHeight: false,
                    floatable: false,
                    autoHide: false,
                    animFloat: false,
                    hideCollapseTool: true,
                    collapsible: true,
                    collapseMode: 'mini',
                    split: true,
                    frame: false,
                    activeTab: 0,
                    headerAsText: false,
                    id: 'MenuPanel',
                    items: [
                        {
                            xtype: 'treepanel',
                            title: 'Data',
                            rootVisible: false,
                            autoScroll: true,
                            autoShow: true,
                            ref: '../DataTree',
                            id: 'DataTree',
                            root: {
                                text: 'Tree Node',
                                singleClickExpand: true
                            },
                            loader: {
                                url: '/sd/ajax/tree.aspx',
                                requestMethod: 'GET',
                                preloadChildren: true
                            }
                        },
                        {
                            xtype: 'panel',
                            title: 'Reports'
                        },
                        {
                            xtype: 'panel',
                            title: 'Actions',
                            layout: 'vbox',
                            padding: 20
                        },
                        {
                            xtype: 'panel',
                            title: 'Admin',
                            layout: 'vbox',
                            defaults: {
                                "margins": "0 0 10 0"
                            },
                            ref: '../AdminTab',
                            id: 'AdminTab',
                            layoutConfig: {
                                padding: 20,
                                align: 'stretch'
                            },
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'View Change Log',
                                    scale: 'medium',
                                    ref: '../../ChangeLogBtn',
                                    id: 'ChangeLogBtn'
                                },
                                {
                                    xtype: 'button',
                                    text: 'View Audit',
                                    scale: 'medium'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    title: 'Admin Settings',
                    region: 'south',
                    width: 100,
                    height: 100,
                    layout: 'vbox',
                    collapsible: true,
                    collapseMode: 'mini',
                    hideCollapseTool: true,
                    split: true,
                    layoutConfig: {
                        align: 'stretch',
                        padding: 10,
                        pack: 'center'
                    },
                    items: [
                        {
                            xtype: 'combo',
                            store: 'WfoStore',
                            displayField: 'ID',
                            valueField: 'ID',
                            mode: 'local',
                            flex: 1,
                            ref: '../AdminWfoBox',
                            id: 'AdminWfoBox'
                        }
                    ]
                }
            ];
            MyContainer1Ui.superclass.initComponent.call(this);
        }
    });

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    98
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Trailing comma in your JSON data (try running in through jslint.com).

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    33
    Vote Rating
    0
    Nightwish is on a distinguished road

      0  

    Default


    Condor, may I say that you are a God among men =D And I can't believe I made such a noob mistake. Thanks for your help.

Similar Threads

  1. Dragging tree nodes onto leaf nodes?
    By IGx89 in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 1 Feb 2012, 7:22 AM
  2. Replies: 1
    Last Post: 12 Sep 2010, 8:30 AM
  3. rendering of expanded nodes with accordion panel/tree panel
    By jadrake75 in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 15 Jul 2010, 7:38 AM
  4. Replies: 1
    Last Post: 27 Sep 2009, 6:15 PM
  5. Custom Tree icons Rendering only after expanding nodes
    By npintos in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 17 Oct 2008, 4:40 AM

Thread Participants: 1

Tags for this Thread