Как настроить сброс CSS, чтобы он применялся к компонентам Ext с помощью свойства scopeResetCSS?

Question

Как настроить Ext CSS для применения только к компонентам Ext?

Это то, что упоминается в документации Ext для scopeResetCSS:

scopeResetCSS : Boolean
True to scope the reset CSS to be just applied to Ext components. 
Note that this wraps root containers with an additional element. 
Also remember that when you turn on this option, you have to use ext-all-scoped 
{ unless you use the bootstrap.js to load your javascript, in which case it will be 
handled for you.

Я уже установил Ext.scopeResetCSS=true;, а также заменил ext-all.css на ext-all-scoped.css, но это не помогает.

Answer 1

Спасибо Дональду Сипе (Donald Sipe) за то, что он опубликовал решение для этого в своем блоге .

. Вы должны создать объект Ext следующим образом, прежде чем он будет загружен сценарием ext-debug.js:

 <script>
    // Here we define Ext for the first time
    Ext = {
        buildSettings:{
            "scopeResetCSS": true  // Thanks, but I'll do my own scoping please
        }
    };
</script>
<script src="js/libs/ext/4.0.2a/ext-all-debug.js"></script>

Устанавливая значение scopeResetCSS в buildSettings объекте конфигурации, вы сообщаете ExtJS, что собираетесь самостоятельно обрабатывать CSS-область.

Answer 2

Например, чтобы получить ограниченную версию, серая тема:

1. установка Компас

2. Затем в командной строке перейдите в папку ExtJs Sass, например. /extjs/resources/sass

3. копия файла ext-all-gray.scss

4. добавить строку $scope-reset-css: true; вверху файла.

Затем запустите: compass compile ext-all-gray-scoped.scss

Это создаст файл ext-all-gray-scoped.css в папке CSS, который вы теперь можете использовать.