我在我的元素中使用 extjs 4.2.2.1144,它正在生成一个伪 css 类,如下所示
//从需要它的单个组件中删除轮廓而不是全局重置
.#{$prefix}webkit {
* {
&:focus {
outline:none !important;
}
}
}
生成的 css 如下:
.x-webkit *:focus {
outline: none !important;
}
这只会导致 IE 中的可编辑表格出现性能问题,但对于 chrome 来说它工作正常,如果我删除它,性能会显着提高。
有没有什么方法可以使用简单的 javascript 或 jquery 在页面加载中卸载(不从 css 文件中删除)这个伪类?
最佳答案
您可以通过在组件级别应用一个类来确定您的 css 范围,使用
cls
属性,然后让框架和浏览器为您完成工作。
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.form.field.Text-cfg-cls
这是一个使用上面文档页面中的示例的示例:
在你的组件文件中(/project_root/app/view/.../MyComponent.js)
// My Component
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
cls: 'no-outline-on-focus' // <-- this will be applied to the component container
allowBlank: false
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' format
}]
});
在你的sass文件中(/project_root/sass/etc/all.scss)
// the parent component with extjs generated styles
.no-outline-on-focus {
// everything within this block is scoped to the element above.
*:focus {
outline: none !important;
}
}
以防万一您没有安装 CLI,这里有一个链接: https://www.sencha.com/products/extjs/cmd-download/
听起来您可能已经拥有它或已经设置了一个元素,但想发送链接以防万一。
如果您不想下载 CLI 或者不需要它,这里有一个使用 SASS 生成您自己的 CSS 输出的链接: http://sass-lang.com/install
Sencha 提供了大量链接在文档中的 sass 变量,这使得样式和主题化更容易一些。 :)
关于javascript - 动态删除伪 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45100622/