CODEWITHSUNDEEP
extjsextjs4
NeatCoder
NeatCoder

Reputation: 33

Ext js 4.0.2a: Change tab color

I need to change the color of a single tab on an action. so I do this

activeTab.tab.el.dom.className = 'tv-x-tab';

And add CSS styles.

 /* line 58, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */
 .tv-x-tab .x-tab-default-top {
 -moz-border-radius-topleft: 4px;
 -webkit-border-top-left-radius: 4px;
 -o-border-top-left-radius: 4px;
 -ms-border-top-left-radius: 4px;
 -khtml-border-top-left-radius: 4px;
 border-top-left-radius: 4px;
 -moz-border-radius-topright: 4px;
 -webkit-border-top-right-radius: 4px;
 -o-border-top-right-radius: 4px;
 -ms-border-top-right-radius: 4px;
 -khtml-border-top-right-radius: 4px;
 border-top-right-radius: 4px;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
-o-border-bottom-right-radius: 0;
-ms-border-bottom-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
-o-border-bottom-left-radius: 0;
-ms-border-bottom-left-radius: 0;
-khtml-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
padding: 3px 3px 0 3px;
border-width: 1px 1px 0 1px;
border-style: solid;
background-image: none;
background-color: white;

}

/* line 91, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */
  .tv-x-tab .x-nlg .x-tab-default-top-mc {
  background-image: url('/themes/images/default/tab/tab-pnl-top-bg.gif');
  background-color: white;
 }

 /* line 104, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */
 .tv-x-tab .x-nbr .x-tab-default-top {
  padding: 0 !important;
  border-width: 0 !important;
 -moz-border-radius: 0px;
 -webkit-border-radius: 0px;
 -o-border-radius: 0px;
 -ms-border-radius: 0px;
 -khtml-border-radius: 0px;
 border-radius: 0px;
 background-color: transparent;
 background-position: 1100404px 1000000px;
}

 /* line 147, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */
 .tv-x-tab .x-nbr .x-tab-default-top-tl,
 .tv-x-tab .x-nbr .x-tab-default-top-bl,
.tv-x-tab .x-nbr .x-tab-default-top-tr,
.tv-x-tab .x-nbr .x-tab-default-top-br,
.tv-x-tab .x-nbr .x-tab-default-top-tc,
.tv-x-tab .x-nbr .x-tab-default-top-bc,
.tv-x-tab .x-nbr .x-tab-default-top-ml,
 .tv-x-tab .x-nbr .x-tab-default-top-mr {
  zoom: 1;
  background-image: url('/themes/images/default/tab/tab-pnl-top-corners.gif');
}
/* line 168, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */
.tv-x-tab .x-nbr .x-tab-default-top-ml,
.tv-x-tab .x-nbr .x-tab-default-top-mr {
 zoom: 1;
 background-image: url(/themes/images/default/tab/tab-pnl-top-sides.gif');
  background-position: 0 0;
}

 /* line 200, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */
 .tv-x-tab .x-nbr .x-tab-default-top-mc {
  padding: 0 0 0 0;
 }

But its not working. What am I doing wrong here? Can somebody suggest how to do this. I have to change only the color of a single tab.

Upvotes: 1

Views: 3567

Answers (1)

JD Smith
JD Smith

Reputation: 1784

You've got a couple of mistakes here.

  1. You're wiping out all the class names and replacing them with "tv-x-tab" instead of adding that class name, which is what you seem to want to do since your CSS still depends on "x-tab-default-top" being there.

    So assuming activeTab is a reference to your current active tab, change

    activeTab.tab.el.dom.className = 'tv-x-tab';

    to

    activeTab.tab.el.addCls('tv-x-tab');

    That will add the class name without removing the other ones.

  2. Your CSS selector is not proper syntax. You've written it as if "x-tab-default-top" is a child of "tv-x-tab" but they are actually the same element, so you need to remove the space between selectors.

    Change

    .tv-x-tab .x-tab-default-top {

    to

    .tv-x-tab.x-tab-default-top {

    That should set you up.

Upvotes: 2

Related Questions