You found a bug! We've classified it as EXTJS-10183 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    32
    Vote Rating
    1
    igoberman is on a distinguished road

      0  

    Default Bug in Ext.data.NodeInterface appendChild when trying to add nested node to a tree.

    Bug in Ext.data.NodeInterface appendChild when trying to add nested node to a tree.


    REQUIRED INFORMATIONExt version tested:
    • Ext 4.2 rev 1
    Browser versions tested against:
    • Chrome
    • IE8
    • FF3 (firebug 1.3.0.10 installed)
    • Safari 4
    DOCTYPE tested against:
    • ____
    Description:
    • Using appendChild to dynamically add 3 level deep node to a Tree Grid does not work. If all levels of the new node are marked 'expanded: true', the new node is not painted correctly in the tree and does not respond to any user interaction.
    Steps to reproduce the problem:
    • Run program below and observe the node is not painted correctly.
    Should be painted as
    L1
    ->L2
    ->->L3
    but painted as
    L1
    ->L2
    ->L2
    ->->L3
    Also, L2 does not respond to expand/ collapse. Expanding/Collapsing L1 leads to more repaint problems.

    The result that was expected:
    • Expected appendChild to work. It is basic tree functionality.
    The result that occurs instead:
    • appendChild does not work correctly
    Test Case:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://cdn.sencha.io/ext/gpl/4.2.1/ext-all-dev.js"></script>
        <script type="text/javascript">
            Ext.require([
                'Ext.data.*',
                'Ext.grid.*',
                'Ext.tree.*'
            ]);
    
    
            Ext.define('DataObject', {
                extend: 'Ext.data.Model',
                fields: ['symbol', 'name']
            });
    
    
            function createGrid() {
                var store = Ext.create('Ext.data.TreeStore', {
                    model: 'DataObject',
                    root: {
                        text: '.',
                        expanded: true
                    },
                    proxy: {
                        type: 'memory'
                    },
                    folderSort: true
                });
    
    
                var grid = Ext.create('Ext.tree.Panel', {
                    store: store,
                    renderTo: 'myTableContainer',
                    width: 300,
                    height: 300,
                    useArrows: true,
                    rootVisible: false,
                    multiSelect: true,
                    singleExpand: true,
                    columns: [
                            {
                                xtype: 'treecolumn',
                                text: 'symbol',
                                dataIndex: 'symbol',
                                flex: 1
                            },
                            {
                                text: 'name',
                                dataIndex: 'name',
                                flex: 1
                            }
                        ]
                });
    
    
                grid.getRootNode().appendChild([
                    { id: Ext.id(), symbol: 'L1', name: 'N1', expanded: true, children: [{ id: Ext.id(), symbol: 'L2', name: 'N2', expanded: true, children: [{ id: Ext.id(), symbol: 'L3', name: 'N3', leaf: true}]}] }
                ]);
    
    
                return grid;
            }
    
    
            Ext.onReady(function () {
                createGrid();
            });
        </script>
        <title>Ext JS Grid</title>
    </head>
    <body></body>
    </html>
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • ________
    • WinXP Pro
    *EDIT BY SLEMMON
    Issue observed with 4.2.0 and 4.2.1. Tested ok with 4.1.3.
    Last edited by slemmon; 12 Jun 2013 at 8:33 AM. Reason: Additional test notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,010
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

Thread Participants: 1