Extjs 项目中常用的小技巧，也许你用得着(1)
Extjs 项目中常用的小技巧，也许你用得着(1)
hbbliyong
发布于 2018-03-05 15:42:13
发布于 2018-03-05 15:42:13
我在项目中遇到的一些知识点：
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
}
},暂时总结这么几个，随后我会继续添加
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013-06-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读