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
    16,833
    Answers
    453
    Vote Rating
    609
    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
    16,833
    Answers
    453
    Vote Rating
    609
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi