zoukankan      html  css  js  c++  java
  • 在Extjs grid中列显示全内容(非多余部分用……显示)

    在Extjs grid中列显示全内容(非多余部分用……显示)

    在工作中碰见了这样一个问题:在用htmleditor编辑器编写的内容在grid的列中显示的时候可以显示全部内容(这时会将这一列撑起来)而在用textarea编辑的内容则不会显示完全。

    后来知道是因为textarea的底部样式导致的:.x-grid-cell-inner中的text-overflow ,white-space

    在这里简单说下这两个样式:

    text-overflow  在Ext的样式为 clip

    text-overflow: clip  不显示省略标记,直接截取

    text-overflow:ellipsis 当对象文本溢出时显示省略标记

    white-space 在Ext的样式为 nowrap

    在Extjs <wbr>grid中列显示全内容(非多余部分用……显示)

    在这两个样式中只修改white-space为normal就可以(如果改底部样式所有grid的显示都将改变)

    因为在工作中有可能不是将所有的grid的样式都改为显示全部内容撑开行高,因此我们要在所在的列中更改样式

    在要显示的列的renderer事件中更改

    renderer: function (v, m, r) {
               m.attr = 'style="white-space:normal;word-wrap:break-word;word-break:break-all;"';

              return v;

           }

    好了,就上面的三行代码就OK啦(O(∩_∩)O~ 说了那么多废话就三句重点*^_^*)

    在m.attr中还可以给所在列添加其他样式,以个人需要添加

    添加word-wrap:break-word;word-break:break-all; 这两个样式用于改进浏览器兼容问题(在火狐英文和数字不换行) 至此IE,谷歌,火狐都可换行

  • 相关阅读:
    javaWeb学习笔记之关于重定向和请求转发的区别
    javaWeb学习笔记之关于Servlet文件下载
    javaWeb学习笔记之关于http
    javaWeb学习笔记之关于tomcat
    小程序订阅消息推送
    Oracle数据库序列的相关问题
    将本地项目push到gitlab仓库中
    面试之BI-SQL--table转换[2]
    面试之BI-SQL--table转换
    面试之C#--垃圾回收器什么时候回收?
  • 原文地址:https://www.cnblogs.com/LDJW/p/11685699.html
Copyright © 2011-2022 走看看