Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    1
    xuzicn is on a distinguished road

      0  

    Default Scrollbar background color is black when gridpanel disabled

    Scrollbar background color is black when gridpanel disabled


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.0.7 / 4.1.0 beta 3
    Browser versions tested against:
    • Chrome 17
    • IE8
    DOCTYPE tested against:
    • Strict
    Description:
    • Background color of gridpanel scroll bar is black when the gridpanel is disabled in Chrome.
    Steps to reproduce the problem:
    • None
    The result that was expected:
    • A gray mask over the scroll bar
    The result that occurs instead:
    • A black mask over the scroll bar
    Test Case:

    Open the samples in source code package and navigate to grid/array-grid.js, add a line at the end of js file
    Code:
        grid.disable();





    HELPFUL INFORMATION




    Screenshot or Video:
    • none
    See this URL for live test case: none




    Debugging already done:
    • none
    Possible fix:
    • Add an additional css
    • Code:
      ::-webkit-scrollbar{
          width: 14px;
      }          
      ::-webkit-scrollbar-button {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          border:1px solid #666666;
          width: 14px;
          height: 14px;
      }
      ::-webkit-scrollbar-button:vertical:decrement 
      {
          background: url(../../ExtJS/ext-4.0.7/resources/themes/images/default/tools/tools-sprites-trans.gif) no-repeat -2px -62px;
      }
      ::-webkit-scrollbar-button:vertical:increment 
      {
          background: url(../../ExtJS/ext-4.0.7/resources/themes/images/default/tools/tools-sprites-trans.gif) no-repeat -2px -77px;
      }
      ::-webkit-scrollbar-button:horizontal:decrement 
      {
          background: url(../../ExtJS/ext-4.0.7/resources/themes/images/default/tools/tools-sprites-trans.gif) no-repeat -2px -105px;
      }
      ::-webkit-scrollbar-button:horizontal:increment 
      {
          background: url(../../ExtJS/ext-4.0.7/resources/themes/images/default/tools/tools-sprites-trans.gif) no-repeat -2px -120px;
      }
      
      
      ::-webkit-scrollbar-thumb
      {
          -webkit-border-radius:4px;
          background-color:#999;
          border: 1px solid #fff;
      }
      ::-webkit-scrollbar-thumb:hover{
          background-color:#BBB;
      }
    Additional CSS used:
    • none
    Operating System:
    • WinXP Pro SP3

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In beta 3 with IE or Chrome I don't see this. Everything looks disabled as expected. Tried on Windows XP and Windows 7
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1