1. #1
    Ext User
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    niblettes is on a distinguished road

      0  

    Default Can't updateRule on ExtJS created DOM objects

    Can't updateRule on ExtJS created DOM objects


    I can update any style attribute on an element I have created and for which I have defined the CSS rule.

    Code:
    Ext.util.CSS.updateRule('.my_test', 'font-size', '4em');
    This works perfectly. However, when I use a selector for a DOM object ExtJS has created nothing happens. For example, I want to remove the bottom border from the strip spacer just below the tabs in a tab panel. The CSS selector for this DIV tag is "x-tab-strip-spacer' But when I use that selector updateRule doesn't do anythin.

    As one might expect, CSS.getRule returns "undefined" for ".x-tab-strip-spacer" but returns "[object CSSStyleRule]" for ".my_test" So its like one rule exists but the other doesn't even though they're both right there in FireBug.

    This doesn't make any sense to me. Why should the Ext.util.CSS methods work on a DOM object I define in the same config object, but not work on any of the DOM objects the config object creates itself?

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

      0  

    Default


    If you read the Ext CSS, the rule which styles that element uses a more specific selector:

    Code:
    .x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer {
    ...

  3. #3
    Ext User
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    niblettes is on a distinguished road

      0  

    Default


    So rather than finding the DOM element in Firebug and using the class name specified in the HTML, the selector we need to use is the the list of selectors Firebug shows under the Style tab to the right of the HTML tab that specifies the exact style attributes we want to change? Is that correct?

    If so, is there any other way to identify the full like of selectors necessary, or is Firebug the best?

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

      0  

    Default


    Updating style rules on the fly does not seem to work. I just experimented with it.

  5. #5
    Ext User
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    niblettes is on a distinguished road

      0  

    Default


    That's odd, because using the selector list you provided (which was the same as as on line 549 of ext-all.css) I was able to set the bottom border of the tab strip spacer to "0, none" with this line of code:

    Code:
    Ext.util.CSS.updateRule('.x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer', 'border-bottom', '0 none');
    Of course the other option, the simplest option, is to just include after the ExtJS styles your own <style> tag that redefines the ExtJS defined style.

    Code:
    .x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer{
        border-bottom: 0 none;
    }
    When learning a new technology its sometimes easy to miss the most obvious solution.

Similar Threads

  1. Getting a div by id from DomHelper created dom
    By Nash-T in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 16 Oct 2009, 9:03 AM
  2. Replies: 0
    Last Post: 23 Jul 2009, 3:01 PM
  3. Referencing objects created in object config
    By hworg in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 3 Jun 2009, 4:11 AM
  4. Handline events for dynamically created DOM
    By DocSavage in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 8 Nov 2008, 12:38 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar