是否可以在 Ext.grid.column.Action 中垂直对齐答案

【问题标题】：Is it possible to align vertically in Ext.grid.column.Action是否可以在 Ext.grid.column.Action 中垂直对齐
【发布时间】：2015-10-20 16:23:24
【问题描述】：

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.column.Action

使用 extjs 操作列，我可以将操作列的图标水平居中，但是我无法垂直对齐图标，这会导致布局看起来很奇怪。

{
    xtype: 'actioncolumn',
            tooltip: this.self.QUICKLOOK_TOOLTIP,
            tdCls: 'action-column',
            isDisabled: function(view, rowIndex, colIndex, item, record) {
                return !this.quicklookable(record);
            },
            getClass: function(value, metaData, record) {
                return this.quicklookable(record) ? 'bui-icon quicklook' : '';
            },
            itemId: 'activityListOpenQuicklook',
            width: 50,
            align: 'center',
            handler: function(grid, rowIndex, colIndex, item, evt, record, row) {
                this.fireEvent('openQuicklook', record);
            },
            scope: this
}

有人有关于如何使用操作列组件垂直对齐的解决方案吗？

【问题讨论】：

标签： javascript css extjs extjs4

【解决方案1】：

最好的方法是将vertical-align: middle; 添加到您的 CSS 中，如下所示：

.x-grid-cell.action-column {
    vertical-align: middle;
}

【讨论】：

忘记了这仍然是开放的，感谢您回复我。是的，可以这样做，但它会覆盖所有 ext 网格的行为方式。最好添加一个带有 !important 标志的外部 cls 来覆盖 ext 基础 css
在这种情况下不需要!important 标志。如果您只想在特定网格的操作列中使用它，您可以随时使用.specific-grid-class .x-grid-cell.action-column 选择器。