Ext button 背景图如其完成填充按钮？ _Ajax

Ext button 背景图如果完成填充按钮？？？
在ext中定义一个按钮，然后不想用它默认的背景颜色，想用图片的背景图，但图片没有完全填充按钮，很难看，怎么处理啊？？？



js定义：



{xtype:"button",text:"搜索",iconCls:"search",height:28,handler:function(){.......}}



..........



css定义：



head-search{background-image:url('../images/btn/google.png')!important;}

------解决方案--------------------
不知道LZ解决了没

我最近也被这个问题搞了.

不过我已经解决了. 希望能帮到后来人。

问题的根本原因是：
button的宽高跟button背景图片的宽高是不一样的。虽然设置了button的宽高, 但其实button背景图片的宽高还是没变(还是Ext默认的16px*16px)。

所以,我们必须手动覆盖掉Ext默认的宽高

说的很麻烦，其实很简单，在css里面改下就OK了, 如下：
head-search{
  background-image:url('../images/btn/google.png')!important;
  height: 28px !imporant; 图片的高度
  width: 50px !important; 图片的宽度
}
有了!important才能保证覆盖掉Ext默认的设置

------解决方案--------------------
首先，你可以找个成型的按钮，然后呢，截取左边部分，右边部分，还有中间部分，在css样式中，加上左边部分和右边部分，中间部分让其进行叠加。给你个css例子：
.button_wrapper{
    height:25px;
    display:inline-block;
overflow:hidden;
color: #000000;
}
.button_left ,.button_center ,.button_right{
    float:left;
    cursor:pointer;
    padding:0 0 0 15px;
    height:25px;
    overflow:hidden;
    background:url(../res/button.png) no-repeat left -25px;
}
.button_right{
    padding:0 15px 0 0;
    background:url(../res/button.png) no-repeat right -25px;
}
.button_center{
padding:0;
    font-weight:bold;
line-height:25px;
    background:url(../res/button.png) repeat-x left -125px;
}