Extjs 项目中常用的小技巧,也许你用得着(1)

简介: 我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 对应的代码实现 { text: '是否启用', width: 80, // xtype:...

我在项目中遇到的一些知识点:

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
        }
    },

暂时总结这么几个,随后我会继续添加

 

 

目录
相关文章
|
6月前
|
前端开发 JavaScript API
我写这10+个JavaScript单行代码,被组长夸代码写得优雅!
我写这10+个JavaScript单行代码,被组长夸代码写得优雅!
|
5月前
|
JSON 自然语言处理 前端开发
学会这个插件,职业生涯少写 1w 行代码。
学会这个插件,职业生涯少写 1w 行代码。
41 0
|
6月前
|
开发框架 移动开发 前端开发
分享47个JavaScript框架源码,总有一款适合您
分享47个JavaScript框架源码,总有一款适合您
104 0
|
6月前
|
移动开发 JavaScript HTML5
分享24个网页游戏源代码,总有一个是你想要的
分享24个网页游戏源代码,总有一个是你想要的
170 0
|
6月前
|
JavaScript 前端开发 索引
某东大厂面试js手写题【手写代码附带注释,放心食用,博主亲测】
某东大厂面试js手写题【手写代码附带注释,放心食用,博主亲测】
58 0
|
JavaScript 前端开发
10段代码让你js技术更上一层楼
10段代码让你js技术更上一层楼
79 3
|
存储 JavaScript 前端开发
20个JS精简代码无形装逼集合,最为致命,记得收藏好
20个JS精简代码无形装逼集合,最为致命,记得收藏好
|
SQL 存储 监控
聊聊那些年遇到过的奇葩代码
无论是开发新需求还是维护旧平台,在工作的过程中我们都会接触到各种样式的代码,有时候会碰到一些优秀的代码心中不免肃然起敬,但是更多的时候我们会遇到很多奇葩代码,有的时候骂骂咧咧的吐槽一段奇葩代码后定睛一看作者,居然是几个月以前自己的写的,心中难免浮现曹操的那句名言:不可能,绝对不可能。
聊聊那些年遇到过的奇葩代码
|
前端开发 JavaScript 算法
js 语法基础送给想要转行前端的小伙伴们
单行注释:// 内容 在网页中按F12可以看到控制台(console)和对所写的代码进行调试。
71 0
|
数据库
代码写的垃圾被嫌弃?这 3 个插件你值得拥有…
今天推荐三个插件,它们都是代码质量检测的神器。可以扫描检测出你项目中不符合规范的代码,他们分别是 SonarLint、SonarQube、Alibaba代码规约插件。
223 0
代码写的垃圾被嫌弃?这 3 个插件你值得拥有…