Cannot get scrollbar into a tree panel

[bimargulies]

I have the following nest of panels:

Panel (vbox)
- Panel (grid)
- Panel (tree)
- Panel (tree)

The tree panels are set up as tree grids. Sometimes, an expanded node overflows vertically. I've tried overflowY: 'auto' and overflowY: 'scroll', and autoScroll: true (all in the tree panels). Nothing results in scrolling

http://jsfiddle.net/bimargulies/yHuz2/13/

is my example. This is simpler than my original description.

Have I found a bug? Is there some recipe that will fix this?

[evant]

It's impossible to say from what you've posted, we need to see a runnable test case. It's likely a mis-configuration.

[bimargulies]

See http://stackoverflow.com/questions/6...-does-not-work.

I'll work on working up a testcase.

I'm working with the commercial-licensed version. Can I post a fiddle with that, or do I need to go download a GPL version?

[sword-it]

Hi bimargulies,

Are you tried with autoScroll: true, here is sample example http://jsfiddle.net/nLvsb/
Also read API http://docs.sencha.com/ext-js/4-1/#!...cfg-autoScroll

[bimargulies]

http://jsfiddle.net/bimargulies/yHuz2/13/

Here's my fiddle. I can't get scrolling into the two tree panels, and a number of other strange things go wrong.

[evant]

Ext.define('WD40.view.legend.Utils', {
    singleton: true,

    createTreeColumsSpec: function(renderFunction) {
        return [{
            xtype: 'treecolumn',
            flex: 1,
            text: 'text',
            dataIndex: 'text',
            renderer: renderFunction
        }];
    },
    createTools: function(prefix) {
        return [{
            type: 'plus',
            id: prefix + 'plustool',
            tooltip: "Show selected document highlights"
        }, {
            type: 'minus',
            id: prefix + 'minustool',
            tooltip: "Hide selected document highlights"
        }];
    }
});

Ext.define('WD40.view.Legend', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.wd40legend',
    requires: ['WD40.view.legend.Utils'],
    autoScroll: true,
    layout: {type: 'vbox', align: 'stretch'},
    items: [
        {
        xtype: 'treepanel',
        title: 'Base Linguistics',
        border: 0,
        rootVisible: false,
        itemId: 'bltree',
        id: 'bltree',
        useArrows: true,
        collapsible: true,
        collapseFirst: false,
        collapsed: false,
        hideHeaders: true,
        root: {
            text: 'Root',
            expanded: true,
            children: [{
                text: 'hello1',
                expanded: true,
                children: [
                    {
                    text: 'child 1',
                    leaf: true},
                {
                    text: 'child 2',
                    leaf: true},
                {
                    text: 'child 3',
                    leaf: true},
                {
                    text: 'child 4',
                    leaf: true},
                {
                    text: 'child 5',
                    leaf: true},
                {
                    text: 'child 6',
                    leaf: true},
                {
                    text: 'child 7',
                    leaf: true},
                {
                    text: 'child 8',
                    leaf: true},
                {
                    text: 'child 9',
                    leaf: true},
                {
                    text: 'child 10',
                    leaf: true},
                {
                    text: 'child 11',
                    leaf: true},
                {
                    text: 'child 12',
                    leaf: true},
                {
                    text: 'child 13',
                    leaf: true},
                {
                    text: 'child 14',
                    leaf: true},
                {
                    text: 'child 15',
                    leaf: true},
                {
                    text: 'child 16',
                    leaf: true},
                {
                    text: 'child 17',
                    leaf: true},
                {
                    text: 'child 18',
                    leaf: true}
                    ]}]
        },
        columns: WD40.view.legend.Utils.createTreeColumsSpec(

        function(value, metaData, record, row, col, store, gridView) {
            return '<span class="treenode">' + value + '</span>';
        }),
        tools: WD40.view.legend.Utils.createTools('bl')},
    {
        xtype: 'treepanel',
        title: 'Entity Extraction',
        border: 0,
        rootVisible: false,
        itemId: 'netree',
        id: 'netree',
        useArrows: true,
        collapsible: true,
        collapseFirst: false,
        hideHeaders: true,
        root: {
            text: 'Root',
            expanded: true,
            children: [{
                text: 'hello1',
                expanded: true,
                children: [
                    {
                    text: 'child 1',
                    leaf: true},
                {
                    text: 'child 2',
                    leaf: true},
                {
                    text: 'child 3',
                    leaf: true},
                {
                    text: 'child 4',
                    leaf: true},
                {
                    text: 'child 5',
                    leaf: true},
                {
                    text: 'child 6',
                    leaf: true},
                {
                    text: 'child 7',
                    leaf: true},
                {
                    text: 'child 8',
                    leaf: true},
                {
                    text: 'child 9',
                    leaf: true},
                {
                    text: 'child 10',
                    leaf: true},
                {
                    text: 'child 11',
                    leaf: true},
                {
                    text: 'child 12',
                    leaf: true},
                {
                    text: 'child 13',
                    leaf: true},
                {
                    text: 'child 14',
                    leaf: true},
                {
                    text: 'child 15',
                    leaf: true},
                {
                    text: 'child 16',
                    leaf: true},
                {
                    text: 'child 17',
                    leaf: true},
                {
                    text: 'child 18',
                    leaf: true}
                    ]}]
        },
        columns: WD40.view.legend.Utils.createTreeColumsSpec(

        function(value, metaData, record, row, col, store, gridView) {
            return '<span class="ne-type-node">' + value + '</span>';
        }),
        tools: WD40.view.legend.Utils.createTools('ne')}]
});





Ext.application({
    name: 'WD40',
    controllers: [],
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            renderTo: Ext.getBody(),
            title: 'wd40',
            layout: 'border',
            items: [{
                xtype: 'toolbar',
                region: 'north',
                split: false,
                border: false},
            {
                xtype: 'panel',
                region: 'center',
                layout: 'border',
                border: false,
                defaults: {
                    split: true
                },
                items: [{
                    xtype: 'tabpanel',
                    region: 'center',
                    height: 250,
                    id: 'docTabs'}
                                                                                                                                                        ]},
            {
                xtype: 'wd40legend',
                id: 'legendView',
                region: 'west',
                split: true,
                width: 275}


                                                                                                                        ]
        });

    }
});​

[bimargulies]

I'm very sorry. I wanted to do scrolling inside each of the tree panels, not for the overall panel containing both.

I've fixed the fiddle to show what I meant to show.

I tried putting the vbox/stretch into the tree panels, but that would be pure cargo-cultism on my part and didn't work in any case.

[bimargulies]

The solution to this is to add some flex: properties to the pieces.

However, a caution to readers: That does not interact well with collapsible.