0

是否可以在所有状态下覆盖按钮背景图像：正常、悬停、在 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 按钮，它会更容易覆盖，但作为网页设计的新手，我不确定如何从该按钮获取事件/更改文本......

谢谢

4

3 回答 3

0

一旦你知道如何，这很容易:)

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

这么容易..

于 2014-07-07T09:38:24.163 回答
0

而且，我知道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;
}

享受 ;）

于 2014-07-07T15:03:54.680 回答
0

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

            {
                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;
}
于 2014-10-15T07:06:24.420 回答