1. #1
    Sencha User
    Join Date
    Feb 2010
    Location
    St. Louis
    Posts
    19
    Vote Rating
    0
    majid mir is on a distinguished road

      0  

    Default How to remove or overwrite the tbseperator class

    How to remove or overwrite the tbseperator class


    Hi ,

    I have application in extjs 3.0 , i have one requirement we have wizard panels and it has toolbar where i have to display arrow images rather then seperator pipeline image. i tired to overwrite the .x-sep class and added the arrow image in the css file and add the config property call

    cls:'wizard-arrow'

    but nothing is display...

    please anyone has answer this how to overwrite the seperator image.

    Cheers

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why can't you just override the background image for that class "xtb-sep" within that toolbar? Give the toolbar and ID or a class, and you have a selector to use.

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Location
    St. Louis
    Posts
    19
    Vote Rating
    0
    majid mir is on a distinguished road

      0  

    Default


    Thanks Animal, i tried that way to override the background image for example

    .wizard-icon .x-toolbar .xtb-sep {
    background-image:url(../images/wizard-arrow.png);
    }
    .wizard-icon .x-toolbar .xtb-sep {
    background-position:center center;
    background-repeat:no-repeat;
    border:0 none;
    cursor:default;
    display:block;
    font-size:1px;
    height:16px;
    margin:0 2px;
    overflow:hidden;
    width:10px;
    }

    i have even increased the width as well.

    it still show the existing sep image and i want this arrow image in this toolbar only

    Thx

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well you have not added the class wizard-icon to the Panel which owns this toolbar then.

    Debug your CSS using Firebug!

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You could also just use a raw Component in the Toolbar:

    Code:
    {
        xtype: 'component',
        cls: 'my-special-arrow-class'
    }
    And style that with some CSS rules.

  6. #6
    Sencha User
    Join Date
    Feb 2010
    Location
    St. Louis
    Posts
    19
    Vote Rating
    0
    majid mir is on a distinguished road

      0  

    Default


    I have already add the class

    {
    xtype: 'tbseparator',
    cls:'wizard-icon'
    }

    that it is not override.

    Thx

  7. #7
    Sencha User
    Join Date
    Feb 2010
    Location
    St. Louis
    Posts
    19
    Vote Rating
    0
    majid mir is on a distinguished road

      0  

    Default


    Animal it does not work, do you know how to extend the tpseperator class or any other solution..

    or any other xtype

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I give up.

    If you can't get a simple Component to be styled, then give it up.

  9. #9
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    css issue solving with override? Wrong!
    Use firebug, edit the css on the fly until it's displayed as you want, then copy the rule to your css. This has nothing to do with ExtJS, it's normal web work.
    Did you ever tried !important ?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Similar Threads

  1. How to disable/remove a class?
    By don4321 in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 10 Jul 2010, 11:08 PM
  2. Remove border from a panel or a css class with the background only?
    By abtrapp in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Jan 2010, 1:34 AM
  3. How to remove/delete some property of some class
    By bugsbunny in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 6 May 2009, 4:56 PM
  4. [OPEN] Array class getting a remove function from the adapters
    By Rewand in forum Ext 1.x: Bugs
    Replies: 6
    Last Post: 22 Jun 2007, 10:11 AM

Thread Participants: 2