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

 

但是依然无法显示图标

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



 

3个回答

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

用百度的图片看看

ythcmh
ythcmh 已经解决了,非常感谢 原因是ext-all.css里少了一句 .x-btn-icon-text-left .x-btn-icon { background-position: left center; } 补上之后就可以了
7 年多之前 回复
iteye_5246
iteye_5246 1.在显示toolbar的jsp页面使用 <style type="text/css"> .icon-demo{ background-image: url(http://www.baidu.com/img/baidu_sylogo1.gif)important; } </style> 在创建toolbar的地方修改 2.清空浏览器缓存 3.确保你jsp编译运行的是已经修改过的而不是上一次的缓存
7 年多之前 回复
ythcmh
ythcmh 还是不行,我是将jsp和js分离写的,会不会js代码有关?你怎么方便我把那个js发给你~帮我看看行吗?2kb。。
7 年多之前 回复
iteye_5246
iteye_5246 在当前页面以 <style type="text/css"> .icon-demo{ background-image: url(http://www.baidu.com/img/baidu_sylogo1.gif)important; } </style> 然后程序中使用iconCls : 'icon-demo'如果还是不显示,那我就帮不上忙了。
7 年多之前 回复

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

ythcmh
ythcmh 自定义的也试过,不行,所以很无奈啊。。。不知道是怎么一回事
7 年多之前 回复
iteye_5246
iteye_5246 自定义的css样式导入了吧、
7 年多之前 回复
ythcmh
ythcmh 还是不会显示 如果是路径问题,我是将extjs-4.1.1下的resources这个包整个放到项目下的啊
7 年多之前 回复

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了吗?

jinnianshilongnian
jinnianshilongnian 1、建议把css放到网页最前边 2、通过chrome看看 是否有css覆盖情况 改个名试试,如addabc
7 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问