ythcmh
2012-09-04 22:44
浏览 602
已采纳

关于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条回答 默认 最新

  • iteye_5246 2012-09-04 23:09
    已采纳
    .add {  
        background-image:url(http://www.baidu.com/img/baidu_sylogo1.gif) !important;  
    }  
    

    用百度的图片看看

    点赞 打赏 评论
  • iteye_5246 2012-09-04 22:51

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

    点赞 打赏 评论
  • jinnianshilongnian 2012-09-05 06:54

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

    点赞 打赏 评论

相关推荐 更多相似问题