Extjs Grid自动换行
博客专区 > Junn 的博客 > 博客详情
Extjs Grid自动换行
Junn 发表于3年前
Extjs Grid自动换行
  • 发表于 3年前
  • 阅读 99
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

GridPanel 单元格自动换行,定义列的时候加个 renderer,例如:

{    
     header : '序号',    
     dataIndex : 'ind',    
     renderer: function(value, meta, record) {    
         meta.attr = 'style="white-space:normal;"';     
         return value;     
    }  
}
使用自动换行又会带来一个新的问题,那就是不需要换行的列在竖直方向上没有居中显示,而是靠上对齐,要想在竖直方向上居中显示还得改下 grid 的样式,本人不赞成直接修改 ext-all.css,一个是尊重人家的版权,还有就是改多了,以后自己都记不清。那么要想改过成单元格都竖直居中,只需在页面或者自己的样式定义里面 重写一个样式即可。代码如下:

<style type="text/css">  
    .x-grid3-row td, .x-grid3-summary-row td {  
            line-height:13px;  
            vertical-align: middle;  
            padding-left:1px;  
            padding-right:1px;  
            -moz-user-select: none;  
            -khtml-user-select:none;  
            -webkit-user-select:ignore;  
    }  
</style>

其实看过原码就知道了,里面只有 vertical-align: middle; 才是设置对齐用的,其他的都是原来定义的样式,只是把这个对齐由原来的 top 改成了 middle 而已。这样就能既达到了有些列自动换行的目的,而且又不影响到 grid 的美观了。

标签: Extjs Grid 自动换行
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 144
博文 372
码字总数 288918
×
Junn
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: