Results 1 to 2 of 2

Thread: ext-all.css global element selectors

  1. #1
    Ext User
    Join Date
    Aug 2010
    Vote Rating

    Default ext-all.css global element selectors

    Hello everyone, I have a question about ext-all.css's use of global elements in ext-all.css.

    I am having basically the same problem that has been mentioned here on the forums many times, my elements are not being styled in the default style as my users expect because ext-all.css resets all styles. I also know about the preventBodyReset config option on Ext.Panel, but our problem is occuring outside of Ext Panels. I believe I have reviewed all of the information so far on the forums regarding this issue, as well as the FAQs (, but haven't found a solution yet.

    We are in the process of integrating ExtJS into our allpication, and currently ExtJS components make up a small portion of our application, say %5 or so. We developed a common menu to show up on all pages using Ext's Menu class, which in tun means that we must include Ext library files on every page. We have started noticing things looking different, and traced the problem back to the first few lines of ext-all.css, as was discussed here:

    My first inclination was to add an "ext" class to all components like this:

    Ext.Component.prototype.onRender = Ext.Component.prototype.onRender.createSequence( function() {
    } );
    And then modify ext-all.css to account for the new class like this:

    .ext html, .ext body, .ext div, .ext dl, .ext dt /* ... */
    I applied appended this .ext class name to all the "global element" rules in the stylesheet (they are the first 20 lines or so) to make the rules only impact elements which were descendants of elements with the .ext class.

    Unfortunately, those rules then became more specific than the generic .x-some-class { ... } rules in ext-all.css such ass .x-grid3-hd-inner, and took priority when the browser applied the styles (

    My next attempt was to append that .ext class to all CSS selectors in ext-all.css by regular expression, but that attempt failed because certain classes like ext-gecko which are applied to the body tag need to appear before my ext class in the selector.

    So, to this point we aren't able to find a solution to integrating Ext into our legacy application that does not involve wrapping the 95% of our application that does not use Ext in DIVs with classes that reset the styles to the browser defaults using W3C's default HTML4 stylesheet: . This would be a pretty difficult task.

    I read that one of the goals for Ext 3 was to remove all global styles, is this true? If so, what is the timeliene for this update?

    I would appreciate it if anyone had any ideas to help me out. Thank you for your time.

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Vote Rating


    I am having that same problem.
    IMO ExtJS stylesheets should not mess with global selectors.

    I know they do this so ExtJS components can look nice in any browser, but maybe they could do something more specific to achieve that.

Similar Threads

  1. CSS.UpdateRule and Capitilization of selectors/class names
    By willgillen in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 4 Sep 2009, 10:28 AM
  2. Global CSS causes problems
    By giorgoc in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Feb 2008, 11:03 AM
  3. 2 grids with different global css possible?
    By tobiu in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 14 Feb 2008, 9:30 AM
  4. ext-all.css setting global element styles
    By razorman8669 in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 25 Jul 2007, 12:40 PM
  5. DomQuery and Css selectors
    By spawn150 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 22 Jul 2007, 12:41 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts