ext.js 5.0.0 图片按钮

Question

是否可以在 ext.js 5.0.0 中在所有状态下覆盖按钮背景图像：正常、悬停、按下？我尝试使用以下 css 代码但没有成功：

.fieldNameCls
{

}

.fieldDataCls
{

}

.x-btn.removeButtonCls {
  width: 26px;
  height: 26px;
//  background-color: transparent !important;
  background: url('images/RemoveDetailButton.png') no-repeat;
  background-size: contain !important;
  border-style: none !important;
  border-radius: 0px !important;
}

.x-btn-over.removeButtonCls {
  width: 26px;
  height: 26px;
  background: url('images/RemoveDetailButtonHover.png') no-repeat;
  background-size: contain !important;
  border-style: none !important;
  border-radius: 0px !important;
}

.x-btn-pressed.removeButtonCls {
  width: 26px;
  height: 26px;
  background: url('images/RemoveDetailButtonPressed.png') no-repeat;
  background-size: contain !important;
  border-style: none !important;
  border-radius: 0px !important;
}

js按钮定义如下：

{
    xtype: 'button',
    itemId: 'removeButton',
    cls: 'removeButtonCls',
    // style: 'background:url("resources/images/RemoveDetailButton.png") no-repeat; background-size: 100% !important; border-style: none !important;border-radius: 0px !important;',
    // style: 'background:none !important; border-style: none !important;border-radius: 0px !important;',
    margin: '10 10 0 0'
}

我试图了解要覆盖哪些类，但无法理解 Ext.js 每个按钮使用的所有 div/span ... ;)

如果我只使用一些 HTML 按钮，它会更容易覆盖，但作为网页设计的新手，我不确定如何从该按钮获取事件/更改文本...

谢谢

Answer 1

一旦你知道怎么做，就很容易:)

在 Ext.js 中：

{
    xtype: 'button',
    itemId: 'removeButton',
    baseCls: 'removeButtonCls',
    margin: '10 10 0 0'
}

在 CSS 中：

.removeButtonCls {
  width: 26px;
  height: 26px;
  //  background-color: transparent !important;
  background: url('images/RemoveDetailButton.png') no-repeat;
  background-size: contain !important;
  border-style: none !important;
  border-radius: 0px !important;
}

.removeButtonCls :hover {
  width: 26px;
  height: 26px;
  //  background-color: transparent !important;
  background: url('images/RemoveDetailButtonHover.png') no-repeat;
  background-size: contain !important;
  border-style: none !important;
  border-radius: 0px !important;
}

.removeButtonCls :active {
  width: 26px;
  height: 26px;
  //  background-color: transparent !important;
  background: url('images/RemoveDetailButtonPressed.png') no-repeat;
  background-size: contain !important;
  border-style: none !important;
  border-radius: 0px !important;
}

那么简单..

Answer 2

而且，我知道由于 stackoverflow 的无限统一性，它不会完全“元正确”，但我还想分享如何获取带有文本的自定义按钮，以防万一。它完全有另一种方法，并且使用标准的 ext.js 按钮类：

在js中：

{
    xtype: 'button',
    text: 'Add Detail',
    baseCls: 'contactDetailsEditButtonCls'
},

在 scss 中：

.ContactDetailsEditTitle { 背景颜色：透明！重要； 颜色：#46a6f2； 垂直对齐：中间； 高度：20px； 行高：20px； 字体大小：20px； 字体粗细：粗体； }

.ContactDetailsEditImage
{
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
  -khtml-border-radius: 0px;
  border-radius: 0px;
  border-color: #d5d5d5;
  border-style: dashed;
  border-width: 2px;
  width: 128px;
  height: 128px;
}

.ContatDetailsEditImageOverlayLabel
{
  width: 128px;
  line-height: 14px;
  text-align: center;
  background-color: rgba(128, 128, 128, 0.30) !important;
  color: #f2f2f2;
  font-weight: bold;
}

.contactDetailsButtonCls
{
//  left: 0px !important;
//  top: 0px !important;
  width: 80px !important;
  height: 40px !important;
  //line-height: 40px !important;
  background-color: #ff8409 !important;
  background-size: 100% !important;
  border-style: none !important;
  border-radius: 0px !important;
}

.x-btn-over.contactDetailsButtonCls
{
//  left: 0px !important;
//  top: 0px !important;
  width: 80px !important;
  height: 40px !important;
  //line-height: 40px !important;
  background-color: #ffaf0d !important;
  background-size: 100% !important;
  border-style: none !important;
  border-radius: 0px !important;
}

.x-btn-pressed.contactDetailsButtonCls
{
//  left: 0px !important;
//  top: 0px !important;
  width: 80px !important;
  height: 40px !important;
  //line-height: 40px !important;
  background-color: #f3330d !important;
  background-size: 100% !important;
  border-style: none !important;
  border-radius: 0px !important;
}

享受;)

Answer 3

这是我的例子。对不起我的英语。

            {
                xtype: 'button', // #26
                cls:'blue',
                itemId: 'submit',
                formBind: true,  // #27
                iconCls: 'key-go',
                text: "Submit"
            }

在 CSS 中。

.blue
{
    -- border: 2px solid #9A9C9C; /*or this*/
    border-color: #9A9C9C;
    border-width: 2px;

    border-radius: 20px;
}

.blue .x-btn-inner /*spacer is space.  This for text and background inner text*/
{
    font-weight: bold;
    color: white;
    font-size: 14px;
    background-color: #BCBEBE !important;    
    border-radius: 16px;
}

.x-btn-over.blue /*is concatenating. This for border and background in over event*/
{
    border-color: #008080;
    border-width: 2px;
    background-color: #008080 !important;    
}

.x-btn-over.blue .x-btn-inner /*spacer is space. This for text in over event*/
{
    background-color: #68ACAC !important;       
    color: #FFFF00;
}

如果需要，将“-over”替换为“-focus”、“-pressed”或“-disabled”。

还有这个项目中所有按钮的例子。

.x-btn  {
    border-radius: 15px;
    border-color: #008080;
    padding:5px !important;
    border-width: 3px;
}


.x-btn  .x-btn-inner{
  font-size: 12px;
  font-weight: bold;
  color: #7786A2;
}
.x-btn-over {
    border-color: red;
    --border-width: 3px;
}

.x-btn-over .x-btn-inner{ /*spacer is space.  This for text in over event*/
  font-size: 14px;
  font-weight: normal;
  color: blue;
}