ExtJS如何使用PressedCls配置设置按钮CSS

Question

I want to change color when button is pressed. I tried to use pressedCls config but it didn't work. How to fix the problem or is there another way to set css when button is pressed? Thanks a lot!

Javascript:

Ext.create('Ext.Button', {
      text: 'Click me',
      renderTo: Ext.getBody(),
      cls: 'my-btn',
      pressedCls: 'my-btn-pressed'
});

CSS:

.my-btn {
    background: Black
}

.my-btn-pressed {
    background: Red;
}

Fiddle Here

Answer 1

I think this is a bug, for 4 ext you just can add "x-"-prefix for your pressedCls. But for extjs 5 you must use !important directive in your css attribute. Look at this:

Edited Thanks for @Digigizmo For ExtJs 5 you need to use correct element selector. For 4 version and earlier just add "x-" prefix for css attribute.

.my-btn.x-btn.x-btn-pressed  {
    background: Red;
}

Fiddle

For ExtJs 4 and earlier

.x-my-btn-pressed {
    background: Red;
}

For ExtJs 5 (wrong way, use correct selector above)

.x-btn-pressed.my-btn {
    background: Red !important;
}