Ext.data.TreeStore deletes second level children from config

**maciasoft** · 7 Jan 2013 6:10 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0, 4.1.3

Browser versions tested against:

Chrome, but reproducable on any

DOCTYPE tested against:

HTML 5 <!DOCTYPE html>

Description:

Ext.data.TreeStore deletes second level children from config which renders that config unusable when instantiating store second time.

Steps to reproduce the problem (see testcase):

Define treepanel config without store, but a root with two levels of children.
Assign that config to some variable
Create two treepanels using that variable as config

The result that was expected:

Two identical treepanels created
Variable remains unchanged

The result that occurs instead:

Second treepanel does not contain second level children
Second level children is deleted from config object

Test Case:

Provided test case as full html page. Just copy-paste to a .html file and open in your browser.
Test case runs on Ext JS 4.1.0 from sencha CDN, but it is reproducible on 4.1.3.

Code:

     <!DOCTYPE html>
<html>
    <head>
        <title>Test case</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-4.1.0-gpl/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://cdn.sencha.com/ext-4.1.0-gpl/ext-all.js"></script>
    </head>
    <body>
        <div id="treepanel-1" ></div>
        <div id="treepanel-2" ></div>
        
        <script type="text/javascript">
            var widgetDef = {
                xtype: 'treepanel',
                root: {
                    expanded: true,
                    children: [
                    {
                        text: 'Level 1', 
                        id: 'level1', 
                        leaf: true
                    },
                    {
                        text: 'Level 1 parent', 
                        id: 'level1parent', 
                        expanded: true,
                        children: [
                        {
                            text: 'Level 2', 
                            id: 'level 2', 
                            leaf: true
                        }
                        ]
                    }
                    ]
                }
            }
            Ext.onReady(function() {
                for(var i=1; i<=2; i++) {
                    Ext.widget(Ext.apply({
                        renderTo: 'treepanel-'+i,
                        title: 'Treepanel '+i
                    }, widgetDef))
                }
            })
        </script>
    </body>
</html>

HELPFUL INFORMATION

Screenshot or Video:
extbug-screenshot.png

Debugging already done:

There is a line in Ext.data.TreeStore.onNodeAdded that deletes children, but I am unable to tell why first level children are preserved.

Operating System:

Win7 64

**mitchellsimoens** · 7 Jan 2013 9:16 AM

You need to be careful as object and arrays can be shared if used in multiple places. To get around it you can create a new set:

Code:

var widgetDef = {
                xtype : 'treepanel',
                root  : {
                    expanded : true,
                    children : [
                        {
                            text : 'Level 1',
                            id   : 'level1',
                            leaf : true
                        },
                        {
                            text     : 'Level 1 parent',
                            id       : 'level1parent',
                            expanded : true,
                            children : [
                                {
                                    text : 'Level 2',
                                    id   : 'level 2',
                                    leaf : true
                                }
                            ]
                        }
                    ]
                }
            },
            i = 1,
            config;

        for (; i < 3; i++) {
            config = Ext.Object.merge({}, widgetDef);

            Ext.widget(Ext.apply({
                renderTo : document.body,
                title    : 'Treepanel ' + i
            }, config))
        }

**evant** · 7 Jan 2013 5:33 PM

We follow a rule of not mutating objects/arrays that get passed in from user code, so I think we should fix this up.

Ext.data.TreeStore deletes second level children from config

Thread Tools

Search Thread

Display

Ext.data.TreeStore deletes second level children from config

Ext.data.TreeStore deletes second level children from config

Tags for this Thread