1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default Answered: Horizontal scrollbar on Ext.view.View

    Answered: Horizontal scrollbar on Ext.view.View


    Hello,

    I am trying to add a horizontal scrollbar on a Ext.vew.View component with no success.
    I try to set the config autoScroll: true, also overflowX: 'auto'. Not in combination, one then another.

    What i need is, to have an View, with a fix with, but the content of the view could have a a bigger with, so a scrollbar should be visible to see all content. What happening with my code is that the content is been wrapped.

    Thanks for any help.

  2. One option to get the effect you want is to dynamically calculate the width of the view (you already know the # of columns you want and each column should have a set width) and put the view in a container with the width set to the screen width and autoScroll : true.

    Something like:
    Code:
    Ext.create('Ext.panel.Panel', {
       renderTo : 'someplace',
       title : 'My Panel',
       height : 500,
       // Set to screen width (may not be needed to be explicitly set)
       width : 800,
       autoScroll : true,
       items : [{
          xtype : 'dataview',
          // Dynamically calculate width here
          width : 1000,
          store: 'myStore',
          tpl: '...',
       }]
    });
    If the internal View is larger than the external container, then the scrollbars will show up.

    Hope this helps.

  3. #2
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    64
    Answers
    6
    Vote Rating
    5
    AssetWorks is on a distinguished road

      0  

    Default


    set a height on it to with autoscroll set to true and that should do it

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default


    Thanks for your reply,

    But if i set HEIGHT, and autoScroll: true, i do get a VERTICAL scrollbar. that works. But this is not the case. I do need HORIZONTAL scrollbar. The height, in this case, is not important, could have 3000px, that's ok. I need to fix the WIDTH, and be able to scroll the content right and left.

  5. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    120
    Answers
    14
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    The Ext.view.View uses an XTemplate to layout the content. What does your template looks like?

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default


    This print a matrix, where the number of columns and rows are defined dynamically. And if the number of columns, are bigger than the screen size, i would like to have a scroll to see then, and to have the row wrapped.

    Code:
     tpl: [
            '<tpl for=".">',
                '<tpl if="Tipo == \'A\'">',
                    '<div class="camara-cell-wrap" id="camara-cell-{Ind}" style="background:{BgColor};{Style}">',
                        '<div class="camara-cell-area"><span>{NomeDaArea}</span></div>',
                        '<div class="camara-cell-trecho-ordem"><span>T:{Trecho}</span> - <span>O:{Ordem}</span></div>',
                        '<div class="camara-cell-rua-posicao"><span>R:{Rua}</span> - <span>P:{Profundidade}</span></div>',
                    '</div>',
                '</tpl>',
                    '<tpl if="Tipo == \'C\'">',
                        '<div class="camara-cell-wrap" id="camara-cell-{Ind}" style="background: #E1E1E1;{Style}">',
                            '<div class="camara-cell-area"><span>Corredor</span></div>',
                        '</div>',
                    '</tpl>',
                    '<tpl if="Tipo == \'P\'">',
                        '<div class="camara-cell-wrap" id="camara-cell-{Ind}" style="background: #B1B1B1;{Style}">',
                            '<div class="camara-cell-area"><span>Porta</span></div>',
                        '</div>',
                    '</tpl>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],
    Thanx

  7. #6
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    120
    Answers
    14
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    One option to get the effect you want is to dynamically calculate the width of the view (you already know the # of columns you want and each column should have a set width) and put the view in a container with the width set to the screen width and autoScroll : true.

    Something like:
    Code:
    Ext.create('Ext.panel.Panel', {
       renderTo : 'someplace',
       title : 'My Panel',
       height : 500,
       // Set to screen width (may not be needed to be explicitly set)
       width : 800,
       autoScroll : true,
       items : [{
          xtype : 'dataview',
          // Dynamically calculate width here
          width : 1000,
          store: 'myStore',
          tpl: '...',
       }]
    });
    If the internal View is larger than the external container, then the scrollbars will show up.

    Hope this helps.

  8. #7
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    120
    Answers
    14
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    I updated the above (removed layout and corrected the widths) so as to produce something like:

    sample.JPG

  9. #8
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    120
    Answers
    14
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    Based on my understanding:
    This appears to be the only way to do this because of the nature of the View class. To get the <div> in you template to line up side by side, you're using CSS, which falls in with how the browser naturally works. The divs will only line up if there is room for them in the outer div's width, else it wraps (same concept with text wrapping on whitespace).

    To get the scrollbars, you really need it to be controlled by the Ext layout manager, thus the View needs a fixed width set with an outer container determining if the scrollbars are needed.

  10. #9
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default


    Thanks chamacs, your idea to add a container for the View.view, fix the container width, and set the view width based on columns number works like a charm.

  11. #10
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default setting height of panel to view horizontal scrollbar

    setting height of panel to view horizontal scrollbar


    I had a similar issue and by setting a fixed height in my panel allowed the horizontal scrollbar to show up as long as the data in panel went past the current width. This was the behavior in ExtJS 4.2. When I was using 4.1.0, setting a fixed height was not needed