1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    103
    Answers
    2
    Vote Rating
    0
    bimargulies is on a distinguished road

      0  

    Default Answered: Cannot get scrollbar into a tree panel

    Answered: Cannot get scrollbar into a tree panel


    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?
    Last edited by bimargulies; 6 Aug 2012 at 3:38 PM. Reason: update.

  2. 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.

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Answers
    465
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's impossible to say from what you've posted, we need to see a runnable test case. It's likely a mis-configuration.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    103
    Answers
    2
    Vote Rating
    0
    bimargulies is on a distinguished road

      0  

    Default OK, but ...

    OK, but ...


    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?

  5. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default give "autoScroll:true" to tree panel

    give "autoScroll:true" to tree panel


    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
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    103
    Answers
    2
    Vote Rating
    0
    bimargulies is on a distinguished road

      0  

    Default Here is a test case

    Here is a test case


    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.

  7. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Answers
    465
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    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}
    
    
                                                                                                                            ]
            });
    
        }
    });‚Äč
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #7
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    103
    Answers
    2
    Vote Rating
    0
    bimargulies is on a distinguished road

      0  

    Default The wrong thing ended up in the fiddle

    The wrong thing ended up in the fiddle


    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.

  9. #8
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    103
    Answers
    2
    Vote Rating
    0
    bimargulies is on a distinguished road

      0  

    Default And the answer to this is flex:

    And the answer to this is flex:


    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.

Thread Participants: 2

Tags for this Thread