TreePanel.getRootNode().isVisible() returns true when TreePanel.rootVisible is false

[bogc]

Ext version tested:

• Ext 4.1.1
• Ext 4.2 Beta

Browser versions tested against:

• Chrome 23.0.1271.97 m
  
• IE9
• FF 17.0.1

Description:

TreePanel.getRootNode().isVisible() returns true even when TreePanel.rootVisible is set to false

Steps to reproduce the problem:

• Unzip the file in the <Ext4 Folder>\examples\tree directory where <Ext4 Folder> is the local folder of your Ext 4 distribution
• Run the attached sample and click on the button that is labeled 'Display the value of TreePanel.getRootNode().isVisible()'

The result that was expected:

• TreePanel.getRootNode().isVisible() returns false

The result that occurs instead:

• TreePanel.getRootNode().isVisible() returns true

Test Case:

Don't have one. I will leave up to you to create one.

Operating System:

• Windows 7 64 bit

TestRootVisibility.zip

var data = {"text" : ".", "children" : [
            {
                task     : 'Project: Shopping',
                duration : 13.25,
                user     : 'Tommy Maintz',
                iconCls  : 'task-folder',
                expanded : true,
                children : [
                    {
                        task     : 'Housewares',
                        duration : 1.25,
                        user     : 'Tommy Maintz',
                        iconCls  : 'task-folder',
                        children : [
                            {
                                task     : 'Kitchen supplies',
                                duration : 0.25,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task'
                            },
                            {
                                task     : 'Groceries',
                                duration : .4,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task',
                                done     : true
                            },
                            {
                                task     : 'Cleaning supplies',
                                duration : .4,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task'
                            },
                            {
                                task     : 'Office supplies',
                                duration : .2,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task'
                            }
                        ]
                    },
                    {
                        task     : 'Remodeling',
                        duration : 12,
                        user     : 'Tommy Maintz',
                        iconCls  : 'task-folder',
                        expanded : true,
                        children : [
                            {
                                task     : 'Retile kitchen',
                                duration : 6.5,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task'
                            },
                            {
                                task     : 'Paint bedroom',
                                duration : 2.75,
                                user     : 'Tommy Maintz',
                                iconCls  : 'task-folder',
                                children : [
                                    {
                                        task     : 'Ceiling',
                                        duration : 1.25,
                                        user     : 'Tommy Maintz',
                                        iconCls  : 'task',
                                        leaf     : true
                                    },
                                    {
                                        task     : 'Walls',
                                        duration : 1.5,
                                        user     : 'Tommy Maintz',
                                        iconCls  : 'task',
                                        leaf     : true
                                    }
                                ]
                            },
                            {
                                task     : 'Decorate living room',
                                duration : 2.75,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task',
                                done     : true
                            },
                            {
                                task     : 'Fix lights',
                                duration : .75,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task',
                                done     : true
                            },
                            {
                                task     : 'Reattach screen door',
                                duration : 2,
                                user     : 'Tommy Maintz',
                                leaf     : true,
                                iconCls  : 'task'
                            }
                        ]
                    }
                ]
            },
            {
                task     : 'Project: Testing',
                duration : 2,
                user     : 'Core Team',
                iconCls  : 'task-folder',
                children : [
                    {
                        task     : 'Mac OSX',
                        duration : 0.75,
                        user     : 'Tommy Maintz',
                        iconCls  : 'task-folder',
                        children : [
                            {
                                task     : 'FireFox',
                                duration : 0.25,
                                user     : 'Tommy Maintz',
                                iconCls  : 'task',
                                leaf     : true
                            },
                            {
                                task     : 'Safari',
                                duration : 0.25,
                                user     : 'Tommy Maintz',
                                iconCls  : 'task',
                                leaf     : true
                            },
                            {
                                task     : 'Chrome',
                                duration : 0.25,
                                user     : 'Tommy Maintz',
                                iconCls  : 'task',
                                leaf     : true
                            }
                        ]
                    },
                    {
                        task     : 'Windows',
                        duration : 3.75,
                        user     : 'Darrell Meyer',
                        iconCls  : 'task-folder',
                        children : [
                            {
                                task     : 'FireFox',
                                duration : 0.25,
                                user     : 'Darrell Meyer',
                                iconCls  : 'task',
                                leaf     : true
                            },
                            {
                                task     : 'Safari',
                                duration : 0.25,
                                user     : 'Darrell Meyer',
                                iconCls  : 'task',
                                leaf     : true
                            },
                            {
                                task     : 'Chrome',
                                duration : 0.25,
                                user     : 'Darrell Meyer',
                                iconCls  : 'task',
                                leaf     : true
                            },
                            {
                                task     : 'Internet Exploder',
                                duration : 3,
                                user     : 'Darrell Meyer',
                                iconCls  : 'task',
                                leaf     : true
                            }
                        ]
                    },
                    {
                        task     : 'Linux',
                        duration : 0.5,
                        user     : 'Aaron Conran',
                        iconCls  : 'task-folder',
                        children : [
                            {
                                task     : 'FireFox',
                                duration : 0.25,
                                user     : 'Aaron Conran',
                                iconCls  : 'task',
                                leaf     : true
                            },
                            {
                                task     : 'Chrome',
                                duration : 0.25,
                                user     : 'Aaron Conran',
                                iconCls  : 'task',
                                leaf     : true
                            }
                        ]
                    }
                ]
            }
        ]};

        //we want to setup a model and store instead of using dataUrl
        Ext.define('Task', {
            extend : 'Ext.data.Model',
            fields : [
                {name : 'task', type : 'string'},
                {name : 'user', type : 'string'},
                {name : 'duration', type : 'string'},
                {name : 'done', type : 'boolean'}
            ]
        });

        var store = Ext.create('Ext.data.TreeStore', {
            model      : 'Task',
            autoLoad   : true,
            root       : data,
            proxy      : {
                type   : 'memory',
                //the store will get the content from the .json file
                reader : {
                    type : 'json'
                }

            },
            folderSort : true
        });

        //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
        var tree = Ext.create('Ext.tree.Panel', {
            title        : 'Core Team Projects',
            width        : 500,
            height       : 300,
            renderTo     : Ext.getBody(),
            collapsible  : true,
            useArrows    : true,
            rootVisible  : false,
            store        : store,
            multiSelect  : true,
            singleExpand : false,
            tbar         : {
                items : [
                    {
                        xtype     : 'button',
                        text      : 'Display the value of TreePanel.getRootNode().isVisible()',
                        listeners : {
                            click : function () {
                                console.log('tree.getRootNode().isVisible() returns ' + tree.getRootNode().isVisible() + ', but treePanel.rootVisible is ' + tree.rootVisible);
                            }
                        }
                    }
                ]
            },
            //the 'columns' property is now 'headers'
            columns      : [
                {
                    xtype     : 'treecolumn', //this is so we know which column will show the tree
                    text      : 'Task',
                    flex      : 2,
                    sortable  : true,
                    dataIndex : 'task'
                },
                {
                    //we must use the templateheader component so we can use a custom tpl
                    xtype     : 'templatecolumn',
                    text      : 'Duration',
                    flex      : 1,
                    sortable  : true,
                    dataIndex : 'duration',
                    align     : 'center',
                    //add in the custom tpl for the rows
                    tpl       : Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                        formatHours : function (v) {
                            if (v < 1) {
                                return Math.round(v * 60) + ' mins';
                            } else if (Math.floor(v) !== v) {
                                var min = v - Math.floor(v);
                                return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                            } else {
                                return v + ' hour' + (v === 1 ? '' : 's');
                            }
                        }
                    })
                }
            ]
        });

[mitchellsimoens]

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

[evant]

In this case visibility refers to the structure of the tree, not whether it's on screen or not. I'll update the docs appropriately.

[bogc]

In this case visibility refers to the structure of the tree,

Could you please elaborate?

Thanks

[evant]

Essentially, isVisible means "Are none of my parent nodes collapsed".