网格列中心对齐不申请行编辑

Question

我正在使用 Extjs 4.2。我有带有行编辑插件的网格。 问题是在开始编辑行时，带有 align:center 的列未正确显示，但 align:right 在编辑器行上工作正常。我搜索了问题，但没有找到解决方案。请帮忙。

这是我的编辑器：

buildPlugins: function () {
    var rowEditing = Ext.create("Ext.grid.plugin.RowEditing",{
        autoCancel: false,
        pluginId: 'rowedit',
        errorSummary: false
    });
    return [rowEditing];
},

这是最后三列代码

{
            text: Message.cameralGrid.columns.menu5,
            menuDisabled: true,
            columns: [
                {
                    text: Message.cameralGrid.columns.cameralMustHoldDate,
                    dataIndex: "cameralMustHoldDate",
                    width: 120,
                    sortable: false,
                    xtype: "datecolumn",
                    style: "text-align:left;",
                    align: "center"
                },
                {
                    text: Message.cameralGrid.columns.cameralHoldDate,
                    dataIndex: "cameralHoldDate",
                    width: 100,
                    sortable: false,
                    xtype: "datecolumn",
                    style: "text-align:left;",
                    align: "center",
                    editor: {
                        xtype: "datefield",
                        format: "d.m.Y",
                        allowBlank: false
                    }
                },
                {
                    text: Message.cameralGrid.columns.fineSum,
                    dataIndex: "fineSum",
                    width: 120,
                    sortable: false,
                    xtype: "numbercolumn",
                    style: "text-align:left;",
                    align: "right",
                    editor: {
                        xtype: "numberfield",
                        minValue: 0,
                        allowBlank: false
                    }
                }
            ]
        }

感谢您的帮助！

Answer 1

我需要重写 Ext.grid.RowEditor 类。这个问题解决后。

Ext.define('helper.RowEditor', {
    override: 'Ext.grid.RowEditor',
    requires: [
        'Ext.grid.RowEditor'
    ],
    addFieldsForColumn: function(column, initial) {
        var me = this,
            i,
            length, field;

        if (Ext.isArray(column)) {
            for (i = 0, length = column.length; i < length; i++) {
                me.addFieldsForColumn(column[i], initial);
            }
            return;
        }

        if (column.getEditor) {

            // Get a default display field if necessary
            field = column.getEditor(null, {
                xtype: 'displayfield',
                // Override Field's implementation so that the default display fields will not return values. This is done because
                // the display field will pick up column renderers from the grid.
                getModelData: function() {
                    return null;
                }
            });
            if (column.align === 'right') {
                field.fieldStyle = 'text-align:right';
            }


            // this block is added -------------------------------->
            if (column.align === 'center') {
                field.fieldStyle = 'text-align:center';
            }
            // <-----------------------------------------------------


            if (column.xtype === 'actioncolumn') {
                field.fieldCls += ' ' + Ext.baseCSSPrefix + 'form-action-col-field'
            }

            if (me.isVisible() && me.context) {
                if (field.is('displayfield')) {
                    me.renderColumnData(field, me.context.record, column);
                } else {
                    field.suspendEvents();
                    field.setValue(me.context.record.get(column.dataIndex));
                    field.resumeEvents();
                }
            }
            if (column.hidden) {
                me.onColumnHide(column);
            } else if (column.rendered && !initial) {
                // Setting after initial render
                me.onColumnShow(column);
            }
        }
    }
});