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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar