关于Extjs4中toolbar的iconCls图标不显示的问题

如题，项目已经引入了标准的几个包ext-all.css,ext-all.js,bootstrap.js，在添加了toolbar后按键可以正常显示，但是按键前的那个图标怎么都显示不出来，网上找了很久包括单独引入一个CSS使用和直接使用地址均没有效果。

上代码：

   js代码

// 创建工具栏组件
var toolbar = [{
text : '新增员工',
iconCls : 'add'
}];

// 创建Grid表格组件
var userGrid = new Ext.grid.Panel({
tbar : toolbar,
region : 'center',
forceFit : true,
renderTo : Ext.getBody()
...
//后面columns,store略
});

 在网上查了另外的方法比如导入新建的css插入

.add {
    background-image:url(../images/add.png) !important;
}

但是依然无法显示图标

见图：出现按键和按键文字信息了，但是图片无法显示

.add {  
    background-image:url(http://www.baidu.com/img/baidu_sylogo1.gif) !important;  
}  

用百度的图片看看

iconCls:'saveIcon'
这样如果能出来，那么就是你css图片路径的问题。。

var toolbar = [{

text : '新增员工',

iconCls : 'add'

}];

.add {
background-image:url(../images/add.png) !important;
}

1、这个url是相对于浏览器地址栏地址计算的，如浏览器是http://l/abc/index.html 则background-image在http://l/images/add.png 这个注意下。

2、iconCls 是这样使用的；

3、在chrome里右击那个按钮，查看add这个样式应用了吗？

4、查看网络请求add.png了吗？