Sorry The problem was due to a CSS Conflict.... My App has its header and footer applied from a portel, where it has its own CSS file, which conflicting with EXT JS CSS... hence its causing the Check box to appear in a different way, as you can see in the image above,
is there any way to override this in our app by some inline css or a css file??
i have also added the snippets of the Portel's CSS affecting the Checkbox, [its not possible to edit the portel's css, as it has many other app and all of them will be affected, so have to find a way to override it]
Code:
INPUT[type='button'] {
BACKGROUND-IMAGE: url(../images/forms/input_shadow.png); BORDER-BOTTOM: #dedede 1px solid; BORDER-LEFT: #bfbfbf 1px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; BACKGROUND-REPEAT: no-repeat; FONT: 1em Arial, Helvetica, Verdana, sans-serif; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #dedede 1px solid; PADDING-TOP: 5px
}
INPUT[type='button'] {
BORDER-BOTTOM-COLOR: #bfbfbf; PADDING-BOTTOM: 5px; BORDER-TOP-COLOR: #dedede; PADDING-LEFT: 5px; WIDTH: auto; PADDING-RIGHT: 5px; BACKGROUND: url(../images/forms/button.png) #f5f5f5 repeat-x 0px 0px; COLOR: #34404f; BORDER-RIGHT-COLOR: #bfbfbf; OVERFLOW: visible; BORDER-LEFT-COLOR: #dedede; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
INPUT[type='button'] {
BORDER-BOTTOM: #9e9e9e 1px solid; BORDER-LEFT: #c8c9ca 1px solid; BACKGROUND: url(../images/portlet/header_bg.png) #d4d4d4 repeat-x 0px 0px; COLOR: #34404f; BORDER-TOP: #c8c9ca 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #9e9e9e 1px solid; text-shadow: 1px 1px #FFF
}
INPUT[type='button'] {
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px
}