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ボタンを使用するだけで、オーバーライドがはるかに簡単になりますが、Webデザインの初心者として、そのボタンからイベントを取得したりテキストを変更したりする方法がわかりません...

ありがとう

4

3 に答える 3

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

必要に応じて、"-focus"、"-pressed"、または "-disabled" の "-over" を置き換えます。

そして、プロジェクト内のすべてのボタンのこの例。

.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 に答える
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 に答える