extjs with bootstrap framework

Question

I am looking to add bootstrap or flatui styling to my ExtJS 5 app. Now, i have done some investigation and tried a few things

• Just including bootstrap css and js files directly in app index file. This doesn't work well because extjs default styling seems to override the bootstrap styling. And also, the way sencha buttons and other components are created they have multiple nestings so even if bootstrap styling didn't get overridden, it still wouldn't work well.

• Picking up extjs-bootstrap-theme from extjs 4 and adapting it to 5. Only issue with this, it will have very limited bootstrap styling as this is built as a sencha theme.

Has anyone had any experience with this? What would be the best way to go about it? Thanks

Answer 1

If you use ExtJS, you should embrace the ExtJS theming system and guidelines.

As per them, the best way would be to derive a new theme from ext-theme-crisp or ext-theme-neptune, for which you overwrite documented CSS variables and create a new iconset to make the new theme match the look of bootstrap/flatui as far as possible. Only then, when this comes to an end and changes are still required, you can add JS code or custom CSS.

While ExtJS has over 500 CSS variables, my guess is that you would have to change between 20 and 100 of them to make it match very closely.

You should start with the most general variables from Global_CSS like $base-color, and then proceed to the more detailed variables, which are often derived from the general variables. So in the best case, you can skip 100 of them because you already changed $base-color to the correct value.