首先是ext的iconCls配置问题:
使用过Ext(http://www.extjs.com)的同志都应该知道,每一个组件(Component)在初始化的时候,都会有一个配置参数(Config){在Ext2中,基本上所有的组件的构造函数只接受一个参数,这个参数或者是一个Config Object或都是一个Array of Config Object},其中,许多组件,如Menu,Button都有一个配置选项iconCls,很明显,这个是用来配置按钮等的图标的,所以假设我们要初始化一个Button,我们在JS里这样写:
var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});
然后我们再在CSS中写下如下规则:
.hello-button {
background: url(images/hello.png) left top no-repeat;
}
把JS和CSS文件都正确的引入到页面当中后,我们只能看到按钮上空出来了一个放置图片的位置,而图片并没有显示出来,通过使用Firebug(http://www.getfirebug.com)来查看页面,通过Inspect我们生成的按钮的Style,我们发现CSS规则hello-button被Ext原有的CSS规则覆盖掉了。但是官方给的Sample里是可以用的啊,查看Sample里的CSS,我发现它比我写的多了一行字,!important,然后,我把我原有的CSS规则修正为:
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}
Bingo~这次图片正确的显示在了按钮上。
当然,按照官方的API,你还有另外一种在按钮上添加图标的方法,将button的Config如下设置:
var button = new Ext.Button({
text: "Hello",
icon: "images/public.gif",
cls: "x-btn-text-icon"
});
这样做的坏处在于,你必须将图片的位置写入到JS里,没有将表现的部分从JS里脱离,如果使用第一种方法的话,可以更容易的更改某个按钮的图标。
下面是ext使用iconCls的路径问题:
在我的这个项目开发中,有时候总遇到图片无法显示的问题。
Javascript脚本文件,Css样式文件的图片路径问题总是一大难题。因为在js脚本和css文件里我不知该如何像jsp页面一样采用<%=request.getContextPath()%>获取项目根路径。
所以针对Css中图片路径问题总结如下:
1、不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。
2、背景图片的路径是相对与当前css页面的路径。
例如:
有如下目录结构
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
代码内容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为:background:url(../images/xxx.gif)
3、我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中。我们会发现有时候我们的图片无法显示了。此时,请查看你的CSS代码,是不是重复设置有问题,是不是图片的定位有问题。如果这些都没有问题请去掉background的重复与定位属性,还原成默认性。如果图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:
Example Source Code:
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
对于第一种情况“url(logo.jpg)”。我们要看此图片是不是与CSS文件在同一目录。对于第二与第三种情况,我们是极力不推荐使用的,因为我们的网页文件可能存在于多级目录中,不同级目录的文件位置注定了我们的相对路径是不一样的。而这样就让问题复杂化了,很可能图片在这个文件中显示正常,换了一级目标,图片就找不到影子了。
有一种方法可以轻松解决这一问题,我们可能建立一个公共文件目录,用来存放一些公用的图片文件,JS脚本,CSS文件,例如“common”,我们将CSS文件直接置于该目录中,也可以将图片文件也直接存于该目录中,如果图片文件较多在其内部建立一个目录存放图片文件“common/images”。我们在CSS文件中直接写:url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的问题了。
关于网站文件的归类与存放,除了根据个人习惯,还要考虑科学性。如果是大型的项目,你应该遵循团队的约定,不然这些问题是够头疼的!
资料来源:
http://icrwen.iteye.com/blog/392658
http://stta04.iteye.com/blog/377692
分享到:
相关推荐
EXT,EasyUI 最新icon图标大集合,节省时间专!
由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上也找了好久,还是自己写了个批量处理程序,集合了1713个png小图标,都是Extjs原生态的,直接...
var system_add_rent = new Ext.Toolbar({ border : false, items : [{ text : "添加月租金", iconCls : "add10", listeners : { click : function() { add_rent.show(); } ...
适用于easyui,extjs等的 200 个 icon图标大全(2000个icon)。 icon图标大全(2000个icon),适用于easyui,extjs等,可适用各种信息系统开发 easyui,icon
给JTextField添加图标 在输入框中添加图标
做网站肯定用的上。有需要的下载,共四集。大约1500张左右
Ext.onReady(function(){ // This function renders a block of buttons function renderButtons(title){ Ext.getBody().createChild({tag: 'h2', html: title}); new ButtonPanel( 'Text Only', [{ text:...
此压缩包,包含了我们网页中常用的ICON小图标,可以直接引用无需修改,上千个图标资源任君挑选
由于开发WEB需要一个WEB计算器插件,在网上找EXTJS4计算器插件没有一个,找extjs4.0计算器...用的时候只需var caculatepanel = new Ext.create('Ext.ux.Caculate', { region: 'east', iconCls: 'icon-help' })就行了
第16课(tree数据载入后自动选中想要选择的节点、tree的iconCls需要注意的地方、js中不可以用search当function名称、combo组件的基本使用) 第17课(combobox属性介绍、combobox的autocomplete功能、联动功能,本地过滤...
便于前端开发者使用的图标,齐全!也可与easyUI配套使用!
icon图标大全(2000个icon),适用于easyui,extjs等,可适用各种信息系统开发
第16课(tree数据载入后自动选中想要选择的节点、tree的iconCls需要注意的地方、js中不可以用search当function名称、combo组件的基本使用) 第17课(combobox属性介绍、combobox的autocomplete功能、联动功能,本地过滤...
第16课(tree数据载入后自动选中想要选择的节点、tree的iconCls需要注意的地方、js中不可以用search当function名称、combo组件的基本使用) 第17课(combobox属性介绍、combobox的autocomplete功能、联动功能,本地过滤...
代码如下: var tree = new Ext.tree.TreePanel({ region:’west’, title:’站点树:’, width:200, minSize:150, maxSize:200, iconCls:’ux-auth-menu-header-icon’, split:true, autoScroll:true, autoHeight:...
MyDesktop.Test = Ext.extend(Ext.app.Module, { id:'bb-cc',//DIV中的ID值 init : function(){ this.launcher = { text: 'abcdefg',//菜单中显示的文本 iconCls:'tabs', handler : this.createWindow, ...
花积分下载的,免费共享.. 原下载地址:http://download.csdn.net/download/miracle98/7579723
combobox:修复在标签中初始化组件时无法正确解析'iconCls'属性的问题; combobox:修复在IE中点击滚动条将会使下拉面板隐藏的问题; pagination:修复在'displayMsg'属性设置为false的时候会缩小分页组件高度的问题...
iconCls 字符串 一个css类,将提供一个背景图片作为标题图标 border 布尔 是否显示面板的边界。 width 数字 表格的宽度 height 数字 表格的高度 columns 数组 表格的列的配置对象,详见下面column属性介绍。 ...
icon图标大全(2000个icon),适用于easyui,extjs等,可适用各种信息系统开发