ExtJS - 如何自定义按钮？

我需要创建一些自定义的按钮 - 就像一个红色按钮与白色的文字，绿色按钮白色文本等ExtJS - 如何自定义按钮？

我遵循了同样的问题：“How to change background of hovered and pressed extjs-button dynamically”的接受的答案，但我没有工作。它只是改变了用户界面，没有任何交互。当我点击自定义按钮时，尽管处理函数被执行，它仍然会切换。

ExtJS按钮根据文档有两种造型配置：overCls和pressedCls。尽管我将它们设置为pressedCls配置对我来说都不起作用。

为了创建我自己的按钮，应该重写/定义哪些css属性？

煎茶小提琴链接：https://fiddle.sencha.com/#fiddle/fim

来源

2014-12-25 talha06

简单地说，任何形式的组件有一个名为 “CLS” 属性。所以，你可以使用以下命令：

cls: 'myclass'

编辑了最后一个问题：

你必须覆盖X-BTN-重点班，删除/替换蓝色背景色：

.x-btn-focus.green-button { 
    background:#46a546; 
}

编辑您的提琴的CSS的：使用这些CSS类

.green-button{ 
    background:#46a546; 
    border: none;!important; 
    color: #ffffff;!important; 
} 

.green-button .x-btn-inner { 
    color: #ffffff; 
} 


.green-button-over { 
    background: #4cc54c; 
    border: none; 
} 


.x-btn-over.green-button { 
    background: #4cc54c; 
    border-color: #4cc54c; 
} 

.x-btn-pressed.green-button { 
    background: #5b9f5b; 
    border-color: #5b9f5b; 
} 
.x-btn-focus.green-button { 
    background:#46a546; 
}

来源

2014-12-26 01:35:13 Tyr

感谢;但这只是改变了按钮的静态UI;我需要改变'over'和'pressed'的用法。我在帖子中添加了sencha小提琴链接;你可以看到我的意思。 – talha06

它似乎在你的小提琴中工作。按钮是绿色的，在悬停它是浅绿色，在mousedown它是蓝色的... – Tyr

不，它不是;当按钮被点击时，按钮颜色变成深蓝色。它切换;点击事件后不会转为原始颜色。当你点击按钮外的某个地方时，它会变成绿色的原始颜色。它应该是这样的：A **绿色**按钮;在它上面应该变成**浅绿色**，当它被点击时它应该是**深绿色**。谢谢你的照顾。 – talha06

尝试：

.x-btn-over.green-button

和

.x-btn-pressed.green-button

我不知道这是否是最好的定义与使用自定义用户界面，但它是一个快速解决方案。

希望它可以帮助

佩德罗

编辑（添加CSS如下评论）

.x-btn-over.green-button { 
background: #4cc54c; 
background-color: red !important; 
background-image: none; 
} 
.x-btn-pressed.green-button { 
background: yellow; 
background-color:yellow !important; 
border:solid 1px red !important; 
}

添加了一些随机的属性，你可能需要的背景图像等

来源

2014-12-26 12:14:05

不幸的是没有为我工作。你有机会看看我为它创建的小提琴：https://fiddle.sencha.com/#fiddle/fim – talha06

我相信问题是在CSS本身，有时，正确覆盖CSS属性，你需要在分号前添加！重要。 --- .x-btn-over.green-button { background：＃4cc54c; background-color：red！important; background-image：none; } .x-btn-pressed.green-button { background：yellow; background-color：yellow！important; 边框：实心1px红！重要; } ---无法真正格式化评论，将尝试将这些添加到我的答案，在你的小提琴上测试，他们似乎工作。 –

感谢您的关心;除了新闻，一切都是完美的。点击按钮后，背景变成蓝色。 – talha06

ExtJS - 如何自定义按钮？

回答

相关问题