专栏首页hbbliyongExtjs 项目中常用的小技巧,也许你用得着(1)

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 条评论
登录 后参与评论

相关文章

  • 把网页内容全部导入word

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

    hbbliyong
  • element-ui el-input只显示下划线

    只需要增加样式 .el-input__inner { width: 220px; border-top-width: 0px; border-left-w...

    hbbliyong
  • WPF备忘录(3)如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter

    一、如何从 Datagrid 中获得单元格的内容    DataGrid 属于一种 ItemsControl, 因此,它有 Items 属性并且用ItemCon...

    hbbliyong
  • Qt 自定义 滚动条 样式

    http://www.cnblogs.com/xufeiyang/p/3314955.html

    bear_fish
  • bootstrap 中的 less

    Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。

    用户5760343
  • 分享一个视频解析接口

    在分享一个qq跳转防红代码,将代码防止在全局文件中,如:头部文件,尾部维文件等。苹果cms:找到根目录下的index.php文件,将这段代码防止在文件的最顶部。

    用户1337665
  • 60个非常实用的CSS代码片段,千万要收藏好了!

    如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

    winty
  • 高质量编码-轨迹管理平台(CSS样式)

    样式仿照百度地图鹰眼轨迹服务早期版本的web端轨迹管理台,地图和UI都使用了夜色风格。

    MiaoGIS
  • Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    何处锦绣不灰堆
  • 什么? CSS 阴影竟然还有这种骚操作 ?

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧(https://www.cnblogs....

    苏南

扫码关注云+社区

领取腾讯云代金券