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,363
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

Thread Participants: 1