extjs button 样式修改不起作用呢？
想改变button的样式，写了两个css类：.index-redFlag-btn-custom{background-image:url('../../images/re...
想改变button的样式，写了两个css类：
.index-redFlag-btn-custom
{
background-image: url('../../images/redFlag-dark.png') !important; //button正常时候的样式
background-repeat: repeat-x !important;
}
.index-redFlag-btn-over-custom
{
background-image: url('../../images/redFlag-light.png') !important; //鼠标移到button上面的时候的样式
background-repeat: repeat-x !important;
}
然后在Extjs4.2中调用
xtype: 'button',
cls: 'index-redFlag-btn-custom',
height: 48,
itemId: 'testBtn',
overCls: 'index-redFlag-btn-over-custom',
width: 48,
text: ''
结果cls起作用了，而overCls没有反应，这是为什么？请大神指教！不要用修改ext-all.css原文件的办法。 展开
.index-redFlag-btn-custom
{
background-image: url('../../images/redFlag-dark.png') !important; //button正常时候的样式
background-repeat: repeat-x !important;
}
.index-redFlag-btn-over-custom
{
background-image: url('../../images/redFlag-light.png') !important; //鼠标移到button上面的时候的样式
background-repeat: repeat-x !important;
}
然后在Extjs4.2中调用
xtype: 'button',
cls: 'index-redFlag-btn-custom',
height: 48,
itemId: 'testBtn',
overCls: 'index-redFlag-btn-over-custom',
width: 48,
text: ''
结果cls起作用了，而overCls没有反应，这是为什么？请大神指教！不要用修改ext-all.css原文件的办法。 展开
1个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Extjs 4.2 demo</title>
<link rel="stylesheet" href="../resources/css/ext-all.css">
<script src="../bootstrap.js"></script>
<style>
.index-redFlag-btn-custom .x-btn-inner{
color:red;
}
/*注意自定义over样式要加x-btn前缀 但是设置的时候不用加*/
.x-btn-index-redFlag-btn-over-custom .x-btn-inner{
color:green;
}
</style>
<script>
Ext.onReady(function(){
Ext.create('Ext.Button', {
cls: 'index-redFlag-btn-custom',
// 不加x-btn(baseCls属性)前缀 extjs通过addClsWithUI方法自动加
overCls:'index-redFlag-btn-over-custom',
text:'click me',
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
追问
啊，成功了，谢谢大神，但是想弄明白，为啥cls不用也不能加x-btn前缀，而overcls必须加呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
