Results 1 to 5 of 5

Thread: How to do an horizontal scroll bar in an extJS panel ?

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    83

    Default How to do an horizontal scroll bar in an extJS panel ?

    Hi,

    I'm creating a UI with extjs and I don't know how to do an horizontal scroll bar in a panel ?

    Here is my code :


    (panel 1)

    Code:
    this.navigPanel1 = new Ext.Panel({
                id: getCompId(this.screenNum, 'navigPanel1'),
                title: getLabel('navigation'),
                headerCfg  : {
                    cls:'x-panel-header',
                    style:'height:12px; text-align: center;'
                },
                split: true,
                //bodyStyle:'overflow-x:scroll; white-space: nowrap;',
                //autoScroll: true,
                anchor:'100% 80%',
                layout: 'anchor',
                autoScroll: true,
                style: {
                    whiteSpace: 'nowrap'
                },
                width: 200,
                defaults: {padding: 5}
            });
    (panel 2)
    Code:
    this.navigPanel2 = new Ext.Panel( {
                id: getCompId(this.screenNum, 'navigPanel2'),
                split: true,
                anchor:'100% 20%',
                width: 130,
                defaults: {padding: 5}
            });
    and big panel that contain the 2 previous panel
    Code:
    this.navigPanel = new Ext.Panel( {
                id: getCompId(this.screenNum, 'navigPanel'),
                region: 'east',
                split: true,
                layout:{
                        type:'anchor',
                        align:'stretch'
                },
                collapsible: true,
                width: 130,
                defaults: {padding: 5},
                items: [this.navigPanel1,this.navigPanel2]
            });
    I want an horizontal scroll bar on my first panel (navigPanel1) by how to do that ?

    Here is my screenshot application :
    http://img687.imageshack.us/i/menumf.jpg/

    And I have another (linked) problem, why I have a scroll bar in the navigPanel1 content on a radiobutton ?

    thanks !

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    1. I see you experimented a lot with layouts. I see parts of border, vbox and anchor layout. If you want a splitter, then use border layout, otherwise use vbox layout. I only recommend anchor layout if one or more of the items are autoHeight:true.

    2. Where are you adding the actual content to navigPanel1?

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    11

    Default

    I have a similar problem. I want a panel to show only horizontal scrollbar, and hide the vertical scrollbar. My panel has some images, and this is for a navigation of the images on the bottom of a screen.

    How can I approach this?

    Thank you!

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    That's not possible. There is no browser that supports overflow-x:auto;overflow-y:hidden;

  5. #5
    Sencha Premium User NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    538

    Default

    Actually, all major browsers support overflow-x: auto with overflow-y: hidden.

    Read this article for examples: https://codeburst.io/how-to-create-h...s-d8069651e9c6
    Noah
    Front-End Developer
    Norfolk Southern

Similar Threads

  1. Replies: 6
    Last Post: 26 Feb 2010, 3:57 PM
  2. Vertical scroll bar brings horizontal scroll bar
    By smiletolead in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 26 Nov 2009, 1:14 AM
  3. Replies: 2
    Last Post: 19 May 2009, 9:48 PM
  4. how to add horizontal scroll bar to a panel
    By zhahua in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 7 Oct 2008, 11:38 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •