Extjs 项目中常用的小技巧,也许你用得着(1)
2013-06-21 11:00
169 查看
我在项目中遇到的一些知识点:
1.在GridPanel中显示图片,效果
对应的代码实现
2.隐藏panel的标题栏
这个很简单,直接把
3.调整Extjs中的所有字体的大小
只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。
但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px。
改完之后按钮出现毛边,在样式文件中加
毛边就不见了!
由于在不同浏览器中,或者不同版本的同款浏览器中显示的Extjs字体大小不一样。而且看起来比较小。不顺眼。
在网上查之,获得一条有用信息:Extjs 在很多情况下使用 11px 字体,11px 大小是一种边缘字体,不同的浏览器对 11px
的渲染各不相同,IE 的渲染和12px 相似,而在
Firefox 中,则和 10px相似,导致字体在FF
中过小的问题。
为了能够彻底的解决字体大小问题,直接打开ext-all.css,查找所有的11px并替换为12px。问题解决了
上网找了好多资料,都说是加上
这样就好了,但是在IE9和FF下还是不好用。
后来到ext-all.css里慢慢试,才找到设置的地方。
把如下代码放到别的css里引用就行了:
4.相对应的,调整了字体大小,tabpanel的标题就会被遮挡住一部分,问题就出来了,怎么调整tabpanel的tab标题:
暂时总结这么几个,随后我会继续添加
1.在GridPanel中显示图片,效果
对应的代码实现
{ text: '是否启用', width: 80, // xtype: 'checkcolumn', dataIndex: 'IsEnabled', renderer: function boolFromValue(val) { if (val) { return '<img src=../../Content/images/true.png>' } else { return '<img src=../../Content/images/false.png>' } }
2.隐藏panel的标题栏
这个很简单,直接把
header: false,
3.调整Extjs中的所有字体的大小
只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。
但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px。
改完之后按钮出现毛边,在样式文件中加
.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text { padding:3px 0px 0px 0px; }
毛边就不见了!
由于在不同浏览器中,或者不同版本的同款浏览器中显示的Extjs字体大小不一样。而且看起来比较小。不顺眼。
在网上查之,获得一条有用信息:Extjs 在很多情况下使用 11px 字体,11px 大小是一种边缘字体,不同的浏览器对 11px
的渲染各不相同,IE 的渲染和12px 相似,而在
Firefox 中,则和 10px相似,导致字体在FF
中过小的问题。
为了能够彻底的解决字体大小问题,直接打开ext-all.css,查找所有的11px并替换为12px。问题解决了
上网找了好多资料,都说是加上
.x-btn-text{ font-size:15px; }
这样就好了,但是在IE9和FF下还是不好用。
后来到ext-all.css里慢慢试,才找到设置的地方。
把如下代码放到别的css里引用就行了:
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{ background-position: 0 center;/*默认*/ background-repeat: no-repeat;/*默认*/ padding-left:18px;/*默认*/ height:16px;/*默认*/ font-size:15px;/*字体大小设置*/ }
4.相对应的,调整了字体大小,tabpanel的标题就会被遮挡住一部分,问题就出来了,怎么调整tabpanel的tab标题:
tabBar : { height : 28, defaults : { height : 28 } },
暂时总结这么几个,随后我会继续添加
相关文章推荐
- Extjs 项目中常用的小技巧,也许你用得着(3)
- Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置
- Extjs 项目中常用的小技巧,也许你用得着(2)
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
- Extjs 项目中常用的小技巧
- Python+Selenium进行UI自动化测试项目中,常用的小技巧4:日志打印,longging模块(控制台和文件同时输出)
- Python+Selenium进行UI自动化测试项目中,常用的小技巧1:读取excel表,转化成字典(dict)输出
- Python+Selenium进行UI自动化测试项目中,常用的小技巧2:读取配置文件(configparser,.ini文件)
- Python+Selenium进行UI自动化测试项目中,常用的小技巧3:写入excel表(python,xlsxwriter)
- ExtJs 常用小技巧备忘录
- c# winform项目开发中常用到得一些小技巧
- 40种网页常用小技巧(javascript)
- 58种网页常用小技巧(javascript)
- J2EE开发之常用开源项目介绍
- maven3常用命令、java项目搭建、web项目搭建详细图解
- java web项目小技巧总结
- 40种网页常用小技巧(javascript)
- 35个你也许不知道的Google开源项目
- Linux系统下项目部署常用命令
- JavaScript常用小技巧—弹出窗口