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必须加呢?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询