注（

原创地址：http://www.cnblogs.com/mlzs/archive/2013/06/09/3128318.html

原创作者：魔狼再世

）

里面的图标看起来五颜六色，而且可以很方便的切换各种颜色出来。

在这里利用了html5的一些特性，其实这些ico的原型都是这样的

这个原型图片名为：maps.png

代码如下：

{xtype: 'button',                text: '装修招标',                iconAlign: 'top',                iconCls: 'maps ico roseRed'}

css如下：

.ico {    -webkit-mask-size:100%;    background-color:#6A6A6A;    background-image:none;}.maps {    -webkit-mask-image:url('../image/icon/maps.png');}.roseRed {    background-color:#DE3554;}

请自行谷歌-webkit-mask-image的作用。

补充一下，css还需要加上。用来去掉他本身的背景色和边框

.home .x-button {    background-image:none;    background-color:transparent;    border:0;}.home .x-button .x-button-label {    font-weight:normal;    color:#A8A8A8;}