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

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

Java code

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

查看更多 下一篇