- 浏览: 598582 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (268)
- ext基础 (72)
- Java基础 (68)
- jquery (14)
- oracle (21)
- sqlserver (7)
- linux (2)
- webserver (1)
- C/C++ (1)
- sql (9)
- IDE (2)
- java 智能卡 (1)
- mysql (6)
- ibatis (2)
- struts2 (3)
- cvs (1)
- 服务器 (1)
- html (11)
- freemarker (4)
- liferay (2)
- jMS (1)
- iphone (1)
- c# (1)
- Android (11)
- wince (6)
- javascript (4)
- ps (1)
- hibernate (1)
- 其他 (3)
最新评论
-
ilyq:
请问,px.gif 在哪里
斜线表头 -
jisang:
没看懂,第一个org.js和最后的js什么关系,可否发我一份完 ...
用ExtJS 实现动态载入树(Load tree) -
JavaStudyEye:
我去,能否搞个正确点的,,,
<#list ...
freemarker 遍历map 对象 -
PangSir:
大爱,简直是大爱!!困扰这么久以来的问题,虽然知道是CSS的问 ...
ExtJs checkbox radiobox 问题 汇总 -
skynet_java:
有demo嘛!邮箱:think_world@foxmail.c ...
消息推送服务需求 - 服务器开发、客户端开发
首先是ext的iconCls配置问题:
使用过Ext(http://www.extjs.com)的同志都应该知道,每一个组件(Component)在初始化的时候,都会有一个配置参数(Config){在Ext2中,基本上所有的组件的构造函数只接受一个参数,这个参数或者是一个Config Object或都是一个Array of Config Object},其中,许多组件,如Menu,Button都有一个配置选项iconCls,很明显,这个是用来配置按钮等的图标的,所以假设我们要初始化一个Button,我们在JS里这样写:
Java代码
var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});
var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});
然后我们再在CSS中写下如下规则:
Java代码
.hello-button {
background: url(images/hello.png) left top no-repeat;
}
.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规则修正为:
Java代码
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}
Bingo~这次图片正确的显示在了按钮上。
当然,按照官方的API,你还有另外一种在按钮上添加图标的方法,将button的Config如下设置:
Java代码
var button = new Ext.Button({
text: "Hello",
icon: "images/public.gif",
cls: "x-btn-text-icon"
});
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页面的路径。
例如:
有如下目录结构
Java代码
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
|--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的重复与定位属性,还原成默认性。如果图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:
Java代码
Example Source Code:
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
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(http://www.extjs.com)的同志都应该知道,每一个组件(Component)在初始化的时候,都会有一个配置参数(Config){在Ext2中,基本上所有的组件的构造函数只接受一个参数,这个参数或者是一个Config Object或都是一个Array of Config Object},其中,许多组件,如Menu,Button都有一个配置选项iconCls,很明显,这个是用来配置按钮等的图标的,所以假设我们要初始化一个Button,我们在JS里这样写:
Java代码
var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});
var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});
然后我们再在CSS中写下如下规则:
Java代码
.hello-button {
background: url(images/hello.png) left top no-repeat;
}
.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规则修正为:
Java代码
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}
Bingo~这次图片正确的显示在了按钮上。
当然,按照官方的API,你还有另外一种在按钮上添加图标的方法,将button的Config如下设置:
Java代码
var button = new Ext.Button({
text: "Hello",
icon: "images/public.gif",
cls: "x-btn-text-icon"
});
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页面的路径。
例如:
有如下目录结构
Java代码
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
|--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的重复与定位属性,还原成默认性。如果图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:
Java代码
Example Source Code:
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
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
发表评论
-
将博客搬至CSDN
2023-02-06 16:57 398https://www.iteye.com/blog/user ... -
Liferay Portal 应用之开发(1)
2012-02-27 14:09 18301.下载安装Eclipse Eclipse� ... -
liferay Portal (1) 应用之配置
2012-02-27 13:59 1343Liferay Portal缺省只有一� ... -
ext form
2011-05-18 15:25 1054//grid1定义的grid var record = gr ... -
combox
2011-04-27 10:55 16211.服务器数据作为ComboBox的数据源 实例 首先从服务 ... -
ext grid 单元格
2010-12-29 11:17 1091listeners : { cellcli ... -
combox 默认值
2010-12-20 10:35 3050[ {"abbr":&quo ... -
Ext.DateField 格式
2010-12-17 10:11 1506Ext.DatePicker,该类为我们提供了一个占地面积很广 ... -
extjs的grid控件如何根据值来设置某行的背景颜色
2010-12-17 09:40 8132根据不同的值来设置grid的背景颜色 在viewConfig ... -
动态组件
2010-12-16 17:05 1092Ext.onReady(function() { ... -
js 获取路径
2010-12-13 19:02 1434<br>以下为输出: <br> ... -
矫正对象 信息登记
2010-12-08 14:10 1005矫正对象登记 { frame : true ... -
转 ext Demo
2010-12-05 13:17 1522下面这个是主界面的设计 Ext.onReady(funct ... -
下拉框 控制 列是否可读
2010-11-12 08:33 1146Ext EditorGrid单元格控制小记 http://d ... -
extjs formpanel 怎么显示图片
2010-10-02 10:13 3630//可加普通的panel,html属性直接添加html代码 ... -
动态 改变 column样式
2010-09-30 16:35 1227grid.getView().getCell(rowNum , ... -
js 应用
2010-09-29 14:38 1063JS里 面的new Date("xxxx/xx/xx ... -
grid 表头 鼠标事件
2010-09-24 16:04 1958grid.addListener("cellclic ... -
格式化
2010-08-26 00:32 1464//创建edgrid.js Ext.onReady(func ... -
ext (增 ,删,改 ,查,导出excel)
2010-08-26 00:03 1900下面为扩张grid的 代码 ...
相关推荐
在Ext JS中,可以通过`icon`配置项指定图像路径。例如: ```javascript { text: '保存', icon: 'path/to/save.png', handler: function() { /* 保存操作 */ } } ``` 2. **字体图标**:随着Web字体技术的发展...
ExtJS是一种基于...通过学习这个"Ext2_Button"示例,你可以了解如何在ExtJS 2.x中创建和配置按钮,进一步提升你的Web应用程序交互性。在实际开发中,结合其他组件和布局,你可以构建出功能强大且用户友好的界面。
在使用EXTJS开发时,可以利用其内置的配置选项来设置图标,如在按钮组件中使用`iconCls`属性指定图标类,或者在其他组件中使用`icon`属性设置图标路径。此外,EXTJS还支持通过`ui`属性调整图标的样式,如添加阴影、...
或者在ExtJS的组件配置中直接使用: ```javascript { xtype: 'button', iconCls: 'icon-add', text: '添加' } ``` 在这里,`iconCls`属性指定了一个CSS类名,这个类名对应的CSS应该定义了背景图像为我们的图标...
本文将深入探讨如何使用Ext JS来实现基本的数据增删改查(CRUD)操作,特别关注代码示例中的Store和GridPanel组件。 #### Store组件 在Ext JS中,`Store`是负责从服务器获取数据并存储这些数据的核心组件。通过...
`Ext.data.Node`是Ext框架中的节点类,用于构建树形数据结构中的各个节点。 - **id**:节点的唯一标识。 - **leaf**:表示当前节点是否为叶子节点。 - **attributes**:节点的自定义属性集合。 - **parentNode**:...
在实际开发中,为了保持代码的整洁和可维护性,通常会将这些图标定义在配置对象或单独的样式表中,便于管理和替换。此外,考虑到响应式设计,开发者还需要注意图标在不同设备和屏幕尺寸下的表现,确保图标在任何情况...
在组件配置中,可以这样使用: ```javascript { text: '添加', iconCls: 'x-icon-add' } ``` - 检查`icon-css.css`文件,可以发现类似`x-icon-add:before`的CSS规则,其中包含`content`属性定义了图标的数据...
在ExtJS中使用这些图标,通常需要将图标文件引入到项目中,然后通过指定CSS类或者配置对象来引用。例如,你可以为一个按钮设置图标,代码可能如下: ```javascript var button = Ext.create('Ext.button.Button', {...
根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...
`Ext.apply(this, { })`方法可以在`InitComponents`中多次设置组件的配置属性。 4. **模板(Tpl)**:EXTJS提供了一种基于HTML的模板机制,允许开发者创建复杂的动态HTML结构,结合数据进行渲染。 5. **事件处理**:...