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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

为博客园添加目录的方法总结

参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblog...

682
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了菜单模块的处理,主要介绍如何动态从数据库里面获...

23210
来自专栏高爽的专栏

IE下用JavaScript将HTML导出为Word、Pdf

       最近升级公司内部系统发文章的功能,涉及到将文章内容导出为html、word、pdf,系统多用于IE环境下,并且公司电脑都预装了office,所以导...

2060
来自专栏前端人人

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2954
来自专栏大内老A

通过几个Hello World感受.NET Core全新的开发体验

2016年6月27日,这是一个特殊的日子,微软全新的.NET开发平台.NET Core的RTM版本正式发布。我个人将.NET Core的核心特性归结为三点,它们...

1836
来自专栏林德熙的博客

从以前的项目格式迁移到 VS2017 新项目格式 必须删除必须修改添加文件项目引用引用包删除多余文件输入注释多个框架使用条件判断迁移 WPF 项目

以前的项目格式使用的是 csproj 的格式,但是 .net core 支持使用 project.json 格式的项目文件,后来还是决定不使用这个格式。 VS2...

442
来自专栏小狼的世界

IE对文档的解析模式及兼容性问题

深入研究这个问题源于最近制作的几个页面,交给前端后,发现在IE8下,对于JS动态控制的内容,页面高度不能够随着动态的调整。

631
来自专栏小特工作室

调用CodeSmith类库实现代码生成(含源码)

      CodeSmith的作用是不言而喻的,用过的人都会觉得它非常强大.根据自定义模板,快速生成代码.只是我们使用的时候,要在它提供的CodeSmith ...

1888
来自专栏web前端教室

javascript-购物车(2)

大家好,这几天一直加班,好久没有更新微信公众号了。 这次我们继续来讲解“购物车应用”,这次来讲解下它的路由功能。。 它是一个单页应用,所有的操作和页面跳转都是在...

1906
来自专栏WD学习记录

MVC学习笔记(一)

MVC 是用于构建 web 应用程序的一种框架,使用 MVC (Model View Controller) 设计:

762

扫描关注云+社区