Extjs改变样式的方法分为两种,一种是把元素放在div里面,然后通过class来修改样式;一种是通过ext自带的标签修改样式,比如cls,baseCls,bodyCls 等等。
自定义样式以后Extjs的按钮在谷歌,火狐上会有一个阴影,但是在ie上面表现良好,在属性里面设置frame:false.ie中的阴影就会消除。但是在谷歌,火狐上面有初步猜想是这个属性在那两个浏览器上面没有起作用。
下来对近期研究ext的结果粘一部分代码,刚开始学习。
项目需要自定义checkbox按钮,然后对checkbox加样式,把checkbox内容写在后面的,把这个东东放在一个table里面。在css里面去除checkbox的样式。
html:"<div id ='step1div' class='oneMbps_x-grid-row1'><table ><tr><td class='oneMbps_x-step1-checkbox' height='40px' id='checkboxstep1' ><input type='checkbox' style='width:28px; height:28px' class='oneMbps_step1Checkbox' id='step1Checkbox'></input></td><td class='oneMbps_x-step1label'>"+OneMbps.global.getLocal('stepSettingPanel_checkbox1_label')+"</td></tr></table></div>"
去除checkbox样式:
.oneMbps_step1Checkbox {
opacity:0;
filter:alpha(opacity=0);
}
checkbox默认背景:
.oneMbps_x-step1-checkbox {
cursor:pointer;
background-image:url(/WAB_OneMbps/apps/resources/images/checkboxnot.png) ;
width:31px;height:32px;
text-align:center;
padding-top:0px;
}
改变checkbox背景
step2Checkbox.parentNode.style.background="url(/WAB_OneMbps/apps/resources/images/checkbox.png) no-repeat";
/*goole滚动条样式*/
#oneMbpsTaskIdListGrid ::-webkit-scrollbar{
background-color:#f0f0f0;
border:none
}
#oneMbpsTaskIdListGrid ::-webkit-scrollbar-thumb {
background-color:#7B7F83;
border:1pxsolid#f0f0f0
}
#oneMbpsTaskIdListGrid ::-webkit-scrollbar-button {
background-color:#7B7F83;
border:none
}
ie滚动条
#oneMbpsTaskIdListGrid div{
scrollbar-arrow-color: #7B7F83; /*三角箭头的颜色*/
scrollbar-face-color: #7B7F83; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #D9D9D9; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #D9D9D9; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #D9D9D9; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #D9D9D9; /*立体滚动条背景颜色*/
scrollbar-base-color:#D9D9D9; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}
研究按钮去掉阴影的时候,因为ie8,ie10,google,火狐,监听的事件不一样,所以根据浏览器一个一个调,最后汇总如下:
listeners: {
render : function(me, event) {
document.getElementById('cancelDetailBtn').className='x-btn x-box-item x-toolbar-item x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon';
},
mousedown : {
element : 'el',
fn : function(event) {
document.getElementById('cancelDetailBtn').className='x-btn x-box-item x-toolbar-item x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon';
}
},
focus:function(){
document.getElementById('cancelDetailBtn').className='x-btn x-box-item x-toolbar-item x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon';
},
mouseover:function(){
document.getElementById('cancelDetailBtn').style.background='#D9D9D9';
document.getElementById('cancelDetailBtn').className='x-btn x-box-item x-toolbar-item x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon';
}
}