0

I have an extjs application which I embed into an existing HTML template with js plugins/css etc.

Im having CSS conflicts between my template styles and ext's. As a simple solution im wondering whether I can tell ext to only use its own css file when creating its components. I've implemented the following setting before I load my application:

Ext = { buildSettings:{ "scopeResetCSS": true // Thanks, but I'll do my own scoping please } };

Which works to some degree, but the plugins css files are overriding certain ext components (form fields, alignment issues etc).

This is the first time i've tried integrating an ext application into a html template so my knowledge is pretty limited.

Thanks in advance

Trevelyan005
  • 37
  • 4

1 Answers1

0

As far as I know, there is no way to scope CSS in a single page, I wonder how you did it. If you want to avoid conflicts, I'm afraid that you'll have to do some refactoring.

Some advices :

  • Build your CSS rules with the ExtJS file loaded in the page, which means that you are currently working with the final environnement. Moreover, you can use their own reset rules.
  • Do not use tag selectors (div, span, input...) - which apply to every element in your page including ExtJS ones - unless the targeted element never host any ExtJS component.
  • Add a namespace to your own selectors (#my-id, .my-class) as ExtJS does (.x-button, .x-container).

Another solution would be to sandbox ExtJS with iframes, but it depends on the nature of your project. I don't have enough informations to help you more than that.