Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    32
    Vote Rating
    0
    Caius Caesar is on a distinguished road

      0  

    Default [4.0.7] vertical slider problem with vbox layout

    [4.0.7] vertical slider problem with vbox layout


    I try to build a scrollbar with 6 buttons and a slider (3 before the slider and three after the slider). For this I use a container with a hbox layout for a horizontal toolbar and a vbox layout for a vertical toolbar. The horizontal toolbar looks perfect, but the slider in the vertical toolbar has two issues. The slider is not positioned to the left and he is too short.

    The code below shows the two scrollbars on a form. The issues with the vertical scrollbar are easy to spot.

    A working example with the code below can be seen at http://jsfiddle.net/Neoteny/ahqas/6/

    Code:
    Ext.onReady(function() {
    
    Ext.define("Ext.MyScrollbar", {
    extend: "Ext.container.Container",
    alias: "widget.scrollbar",
    
    constructor: function (config) {
    if (config.vertical) { config.width = 16 } else { config.height = 16 }
    Ext.apply(config, {
    nItems: config.nItems || 100
    ,nVisibleItems: config.nVisibleItems || 20
    ,firstItem: config.firstItem || 0
    ,layout: { type: config.vertical ? 'vbox' : 'hbox', pack: 'start' }
    });
    var slider = { 
    xtype: 'slider'
    ,vertical: config.vertical
    ,minValue: 0
    ,maxValue: config.nItems - config.nVisibleItems
    ,value: config.vertical ? config.nItems - config.nVisibleItems - config.firstItem : config.firstItem
    ,flex: 1
    };
    Ext.apply(config, {
    defaults: {
    xtype: 'button'
    ,scale: 'small'
    ,width: 16
    ,height: 16  
    }
    ,items: [
    {}
    ,{}  
    ,{}  
    , slider
    ,{}
    ,{}  
    ,{}  
    ]
    });
    this.callParent(arguments);
    }
    
    });
    
    
    var myWindow = Ext.create('Ext.window.Window',{title:'TestScroll', layout: 'absolute',height:600,width:600, 
    items: [{id: 'scrollery',xtype: 'scrollbar',vertical: true,height:300, x:10, y:10},
    {id: 'scrollerx',xtype: 'scrollbar',width:300, x:10, y:330}]});
    
    myWindow.show();
    })

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,868
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have you tried inspecting the component elements in FireBug/DevTools to see where there is an alignment problem?

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    32
    Vote Rating
    0
    Caius Caesar is on a distinguished road

      0  

    Default


    Well, I tried, but couldn't really make sense of it. I saw a width of 22px on some elements of the slider, but when I tried to reduce the width it didn't help. The misalignment in the lenght I couldn't figure out at all.

  4. #4
    Sencha User
    Join Date
    May 2008
    Posts
    32
    Vote Rating
    0
    Caius Caesar is on a distinguished road

      0  

    Default


    What's Sencha's opinion on this issue? I strongly feel this should be filed as a bug and I would welcome a solution or an anouncement that it will be taken care of in a future release. Now I feel ignored.

    Regards,
    Caius

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,868
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    With custom implementations of our controls, special considerations have to be addressed by the developer.
    It is not that you are ignored, but our time is limited in special cases due to the amount of posts we receive each day.

    Please keep in mind that this is P2P support from end users, but we also provide support from our staff to help non licensed customers as well. It is our goal to help whenever possible.

    There is always the option of purchasing a support contract where you can generate tickets and have someone assigned to your ticket.

    I will take a closer look at your issue and get back to you ASAP.

    Regards,
    Scott.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,868
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This is a quick hack to make it look better:

    Code:
    .x-slider-vert .x-slider-inner {
        height:190px !important;   
        left:-2px
    }    
    
    .x-slider-vert .x-slider-end {
        background-position-x: -24px;
    }    
    ‚Äč
    Regards,
    Scott.

Thread Participants: 1

Tags for this Thread