`
bcyy
  • 浏览: 1831419 次
文章分类
社区版块
存档分类
最新评论

Extjs Grid自动换行

 
阅读更多

转帖自:http://blog.sina.com.cn/s/blog_57112b350100m0cu.html

GridPanel 单元格自动换行

定义列的时候加个 renderer,例

Js代码 收藏代码
  1. {
  2. header:'序号',
  3. dataIndex:'ind',
  4. renderer:function(value,meta,record){
  5. meta.attr='style="white-space:normal;"';
  6. returnvalue;
  7. }
  8. }



使用自动换行又会带来一个新的问题,那就是不需要换行的列在竖直方向上没有居中显示,而是靠上对齐,要想在竖直方向上居中显示还得改下 grid 的样式,本人不赞成直接修改 ext-all.css,一个是尊重人家的版权,还有就是改多了,以后自己都记不清。那么要想改过成单元格都竖直居中,只需在页面或者自己的样式定义里面重写一个样式即可:

Html代码 收藏代码
  1. <styletype="text/css">
  2. .x-grid3-rowtd,.x-grid3-summary-rowtd{
  3. line-height:13px;
  4. vertical-align:middle;
  5. padding-left:1px;
  6. padding-right:1px;
  7. -moz-user-select:none;
  8. -khtml-user-select:none;
  9. -webkit-user-select:ignore;
  10. }
  11. </style>



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

转自:http://guozhenqian.iteye.com/blog/1225145

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics