Grid column center align not applying for rowediting

Question

I'm working Extjs 4.2. I have grid with rowediting plugin. Problem is when starting edit row, columns with align:center not showing correctly, but align:right works correct on editor row. I searched problem, but didn't find solve. Please Help with this.

This is my editor:

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

This is last three column code

{
            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
                    }
                }
            ]
        }

Thanks for Help!

Nuraddin K Nuraddin K · Accepted Answer · 2014-05-27T11:51:31

I needed to override Ext.grid.RowEditor class. After this problem is solved.

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);
            }
        }
    }
});

Grid column center align not applying for rowediting

1 Answers