1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    31
    Vote Rating
    0
    raman4984 is on a distinguished road

      0  

    Default Unanswered: changing the background color of panel

    Unanswered: changing the background color of panel


    I am trying to change background color of panel.

    Please see the code:

    Code:
    panel: {
                centered: true,
                width: 200,
                height: 150,
               style: 'background-color: red',
                fullscreen: false,
                hidden: true,
                zIndex: 10,
            
           }
    but style: 'background-color: red' statement doesn't fulfill my requirements. it changes the color of panel border only not complete panel background color.

    please suggest for the same.

    thanks!

  2. #2
    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 Try to add a class

    Try to add a class


    Hi!

    You may add a cls for your panel:-

    Code:
    panel: {
                centered: true,
                width: 200,
                height: 150,
                cls: 'redBG',
                fullscreen: false,
                hidden: true,
                zIndex: 10               }
    CSS:-

    .redBG .x-panel-body{
    background-color : red !important;
    /* add whatever you want here, but don't forget !important */
    }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    31
    Vote Rating
    0
    raman4984 is on a distinguished road

      0  

    Default


    yeah, done but still not working. Again, it's changing the color of panel border only not complete panel background color. I think, there is some hidden panel inside panel,

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3468
    Vote Rating
    836
    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


    Have you inspected the DOM to see if something is overriding your CSS or if you are in the correct element?
    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.

  5. #5
    Sencha User
    Join Date
    May 2012
    Location
    Paris
    Posts
    12
    Answers
    3
    Vote Rating
    0
    silami is on a distinguished road

      0  

    Default


    Quote Originally Posted by sword-it View Post
    Hi!

    You may add a cls for your panel:-

    Code:
    panel: {
                centered: true,
                width: 200,
                height: 150,
                cls: 'redBG',
                fullscreen: false,
                hidden: true,
                zIndex: 10               }
    CSS:-

    .redBG .x-panel-body{
    background-color : red !important;
    /* add whatever you want here, but don't forget !important */
    }
    Hi,

    as sword-it said, you should use a CSS class for your panel, in your CSS file you will have a class defined like this and it will work :
    Code:
    .redBG.x-panel.x-floating, .redBG .x-panel-inner {
          background-color: red !important;
    }
    Regards

  6. #6
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200
    Answers
    1
    Vote Rating
    0
    geewhizbang is on a distinguished road

      0  

    Default


    I have the same problem, and this fix doesn't work.