Remove extjs automatically added classes

Question

I am new to Extjs. I am using Extjs 4 in my project. When the ext-all.js is loaded it automatically adds classes to the <body> tag. and all my other css styles are changed with extjs styles. I found in the documentaion that to set Ext.scopeResetCSS property to true, so I add like below.

    Ext.onReady(function(){
      new Ext.Component({
          scopeResetCSS: true
      });
    });

but it doesn't change any thing. I still have the same problem.

Is there any way to stop extjs from automatically adding css classes to the tags? Please help..

This is my code to generate a multi line message box.

<link rel="stylesheet" type="text/css" href="components/com_jobs/js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="components/com_jobs/js/extjs/ext-all.js"></script>

<!-- extjs message box code -->
<script type="text/javascript">

Ext.require([
'Ext.window.MessageBox'
             ]);     

function removeBid(bidid){
    Ext.MessageBox.show({
        title: 'Address',
        msg: 'Please enter your address:',
        width:300,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        //fn: showResultText
    });
}
</script>

Am I doing anything wrong??? I want extjs to style only its own components. But now extjs styles are effects my whole page.. Please help.

Thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

I asked a similar question for ExtJS 4.2.1 before coming across this one. The solution I adopted was to modify the DOM once ExtJS was loaded, and add a listener for the DOMNodeInserted event to watch for and handle the automatic creation of ExtJS components like pick lists. If you are interested you can find my answer here: https://stackoverflow.com/a/29934347/857209

edited May 23 '17 at 12:08

Community

1
1

answered Apr 29 '15 at 05:00

Glenn Lawrence

2,844
1
32
38

score 0 · Answer 2 · answered Feb 10 '12 at 18:13

0

The scopeResetCSS property is part of Ext.buildSettings, which is used at the beginning of the Ext JS initialization sequence. If you want to change it, you have to edit ext-all.js or change the settings in the Sencha JS Builder (which I'm assuming you're not using).

Open ext-all.js in your favorite text editor (one that can handle larger files, preferably) and search for "scopeResetCSS" near the beginning of the file, and you'll find it easy enough.

answered Feb 10 '12 at 18:13

Eric

6,965
26
32

Hi Eric, Thanks for your quick reply. I've changed the `scopeResetCSS:true` in ext-all.js but still I have the problem. Extjs automatically adds classes to `` and `` tags and changes my css styles. :( In this example http://dev.sencha.com/deploy/ext-3.4.0/examples/message-box/msg-box.html, there are extjs message boxes attached to each button. But no extjs classes added in to its `` tag. I just want extjs to style its own components instead of other tags. – Shakeel Feb 11 '12 at 08:55
That example is from Ext JS 3.4. For 4.0, it looks like classes are automatically added to root objects. You can open up ext-all-scoped.css (the stylesheet you have to use with scopeResetCSS=true) and remove style rules from the classes added to your own tags, or you can use the removeCls method of Ext.Element to programmatically remove classes from a tag. I'm pretty sure there's no built-in setting for this. – Eric Feb 14 '12 at 14:11

score 0 · Answer 3 · answered Mar 10 '12 at 23:33

0

If you are using ExtJS 4.0.2a, then set the scopeResetCSS BEFORE the include.

However, I just switched to ExtJS 4.0.7 and the issue is back. :(

answered Mar 10 '12 at 23:33

Eric

669
3
10
24

Remove extjs automatically added classes

3 Answers3

Linked