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

2013-06-25

Ext button 背景图如果完成填充按钮？？？在ext中定义一个按钮，然后不想用它默认的背景颜色，想用图片的背景图

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

热点排行

Ajax

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