extjs 表格单元格垂直居中对齐

最新推荐文章于 2023-01-30 16:56:49 发布

原创最新推荐文章于 2023-01-30 16:56:49 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #单元格内容 #垂直居中

extjs6 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何解决表格中数据垂直居中的问题。特别是在表格高度被图片等元素撑高时，数据容易偏上显示，影响美观。文章提供了一个简单实用的方法，在ExtJS中通过renderer函数中的metaData.tdStyle属性来实现数据的垂直居中。

假如数据只有一行的话，我们并不会遇到需要数据垂直居中的情况，因为就只有一行，
但是当表格高度被图片等撑高时，有的数据就会在单元格上方，甚是丑陋，如下图：
这里写图片描述

extjs 的“align”属性设置的是水平对齐方式
我们可以采用在renderer函数对其进行设置，查看API，发现renderer函数第二个参数metaData，其介绍如下:
A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and tdStyle.

To add style attributes to the <td> element, you must use the tdStyle property. Using a style attribute in the tdAttr property will override the styles the column sets, such as the width which will break the rendering.
有3个参数：tdCls,tdAttr,tdStyle；
**解决方法：
在renderer 中加入 metaData.tdStyle =”vertical-align:middle;”;**