Geek Answers Handbook

Ext.Button 'overCls' does not work in IE

ExtJS4:

I want my Ext.Button to have its color when I click on it. I wrote the following for this:

Ext.onReady(function(){
    Ext.create('Ext.Button', {
        renderTo: Ext.getBody(),
        text: "Submit",
        overCls: 'x-button-pressed'
    });
});

where "x-button-press" is defined as:

.x-button-pressed{
    background: red;
}

This works fine in Mozilla 10, but IE 7. Please help.

0
source share
1 answer

In the EXT-all.css style for IE it is written that you can hide them. Please check below line

/*
.x-nlg .x-btn-default-small-mc {
    background-image:none;
    background-color:transparent
}

.x-nbr .x-btn-default-small {
    padding:0!important;
    border-width:0!important;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
    border-radius:0;
    background-color:transparent;
    background-position:1100303px 1000303px
}

.x-nbr .x-btn-default-small-tl,.x-nbr .x-btn-default-small-bl,.x-nbr .x-btn-default-small-tr,.x-nbr .x-btn-default-small-br,.x-nbr .x-btn-default-small-tc,.x-nbr .x-btn-default-small-bc,.x-nbr .x-btn-default-small-ml,.x-nbr .x-btn-default-small-mr {
    zoom:1;
    background-image:url('../../resources/themes/images/eg_theme/btn/btn-default-small-corners.gif')
}

.x-nbr .x-btn-default-small-ml,.x-nbr .x-btn-default-small-mr {
    zoom:1;
    background-image:url('../../resources/themes/images/eg_theme/btn/btn-default-small-sides.gif');
    background-position:0 0
}

.x-nbr .x-btn-default-small-mc {
    padding:0
}
*/

if you use ext js 4.1.1 v

0
source

More articles:


All Articles