Scrollbar in extjs tree panel does not work

Question

Sometimes it happens that the scrollbar of my tree panel does not work anymore. While it's still possible to move the scrollbar, the tree doesn't move at all anymore. That happens to me in Firefox and in Chrome as well.

Here is the source of my tree panel:



var treeStore = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: '../tree.pl'
    }
});

var tree = Ext.create('Ext.tree.Panel', {
    store: treeStore,
    renderTo: 'tree',
    title: 'Tree',
    width: 400,
    height: 450,
    rootVisible:false,
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
        {
            xtype: 'tbspacer',
            width: 340
        },
        {
            text: 'Search',
            handler: function(){
                        names = [];
                        Ext.Array.each(tree.getView().getChecked(), function(rec){
                            names.push(rec.get('text'));
                        });

                    resultStore.load({
                        params:{
                            search_type: 'tree',
                            tree_nodes: names.join('II'),
                        }
                    });
                }
    }
    ]
}]

});

Yeah, that happened with me as well. I think this is extjs bug. — Molecular Man, Jul 20 '11 at 06:04
@astrocybernaute: I added the autoScroll config but it didn't help!? — alex, Jul 22 '11 at 11:05

score 8 · Accepted Answer · answered Nov 07 '11 at 12:36

8

I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). To remove custom scroller add the following to the config:

var tree = Ext.create('Ext.tree.Panel', {
  scroll          : false,
  viewConfig      : {
    style           : { overflow: 'auto', overflowX: 'hidden' }
  },
  // ...
});

I haven't tried it for treepanel. But it worked perfectly for the gridpanel (since both tree and grid are just extensions of Ext.panel.Table the solution should work for treepanel too).

answered Nov 07 '11 at 12:36

Molecular Man

22,277
3
72
89

This definitely works. Unfortunately I couldn't use it because it seems to break the scrolling when the up/down arrow keys are used to move through the tree. If anyone else needs that functionality, I shared a work-around here: http://stackoverflow.com/a/9036920/62694 – clint Jan 27 '12 at 16:47

score 4 · Answer 2 · answered Nov 07 '11 at 17:24

The custom scrollers will be replaced with native scrolling again in Ext 4.1. The virtualized scrollers were intended to support infinite scrolling, column locking, etc. but I believe in 4.1 they've managed to solve those and still retain native scrollbars. I'd be surprised if the current issues in 4.0.x ever get resolved because of that.

score 0 · Answer 3 · answered Apr 18 '12 at 16:38

I'm using Ext 4.0.7.

scroll: true

works for me. But, for some reason, someone had added:

layout: anchor

to the configuration of the treepanel, which was causing it to stop working. If you find that scroll: true isn't working, try seeing if someone has added a layout and remove it.

Hope that helps.

score 0 · Answer 4 · edited Oct 28 '12 at 02:27

In EXT 4.0, located within the ext-all.css file under resources of the main library, is the real reason that this doesn't work. The coders of this css file decided that the grid cell should have overflow: hidden; (around line 3324):

.x-grid-cell {
    overflow: hidden;
    font: normal 13px tahoma, arial, verdana, sans-serif;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    cursor: default
}

.x-grid-cell-inner {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 3px 6px;
    white-space: nowrap
}

The best thing to do is to set the overflow to inherit for both classes and this problem is magically gone.

The only thing left is the border of the grid table, but that can be taken care of by just placing css styling in your css. I advice not to place it in the ext-all.css file.

.x-grid-table {
    border: none !important;
    width: auto !important;     
}

Just remember that this will change it for any style that uses .x-grid-cell.

Scrollbar in extjs tree panel does not work

4 Answers4

Linked