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

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

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

由于

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 { background-color：transparent！important; 颜色：＃46a6f2; vertical-align：middle; 身高：20px; 行高：20px; font-size：20px; font-weight：bold; }

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

如果需要，请更换＆＃34; -over＆＃34; on＆＃34; -focus＆＃34;，＆＃34; -pressed＆＃34;或＆＃34; -disabled＆＃34;。

这是项目中所有按钮的示例。

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

ext.js 5.0.0图像按钮

3 个答案: