Extjs自定义样式

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