javascript - 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 按钮来代替，它会更容易覆盖，但作为 Web 设计的新手，我不确定我将如何从该按钮获取事件/更改文本 ...

谢谢

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;
}

就这么简单..