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.

Eric Eric · Accepted Answer · 2012-02-10T18:13:24

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.

Remove extjs automatically added classes

3 Answers