Custom fields' editors positioning in ExtJS 4.2.1

[genix.g]

I have a problem during migrating from ExtJS 4.1.3 to 4.2.1 with my custom fields' editors. It worked fine in 4.1.3 and shows editor fields aligned by top border of the cell.
Some columns of my grid have custom editor like that:

editor: { xtype: 'marketpricefield' }

Here is full code of the editor:

Ext.define('RD.widget.MarketPriceField', {
        extend: 'Ext.form.FieldContainer',
        mixins: { field: 'Ext.form.field.Field' },
        alias: 'widget.marketpricefield',
        cls: 'mpeditbox',
        hideEl: false,
        layout: {
            type:'column',
            padding:'0',
            align:'left',
            verticalAlign:'top'
        },
        defaults:{margin:'0 0 0 0'},
        combineErrors: true,
        width: 90,
        mp_typeCfg: null,
        mp_valueCfg: null,
        mp_monthCfg: null,
        mp_yearCfg: null,
        save: function (saving) {
            var me = this;
            if (saving) {
                var newprice = me.mp_valueField.getValue();
                var newtype = me.mp_typeField.getValue();
                if (newtype > 0 && newprice > 0 && (me.oldMarketPrice != newprice || me.oldTypeID != newtype)) {
                    RD.editingRecord.data.MarketPrice = newprice;
                    RD.editingRecord.data.MarketPriceTypeID = newtype;
                    RD.editingRecord.data.MarketYear = me.mp_yearField.getValue();
                    RD.editingRecord.data.MarketPriceMonth = me.mp_monthField.getValue();
                    RD.UpdateResource(RD.editingRecord);
                }
            }
            me.mp_typeField.hide();
            me.mp_valueField.hide();
            me.mp_monthField.hide();
            me.mp_yearField.hide();
            me.getComponent('btnSave').hide();
            me.getComponent('btnCancel').hide();
            gridResources.plugins[0].cancelEdit();
            return;
        },
        initComponent: function () {
            var me = this;
            if (!me.mp_typeCfg) me.mp_typeCfg = {};
            if (!me.mp_valueCfg) me.mp_valueCfg = {};
            if (!me.mp_monthCfg) me.mp_monthCfg = {};
            if (!me.mp_yearCfg) me.mp_yearCfg = {};
            me.buildField();
            me.callParent();
            me.mp_typeField = me.getComponent('mp_type');
            me.mp_valueField = me.getComponent('mp_value');
            me.mp_monthField = me.getComponent('mp_month');
            me.mp_yearField = me.getComponent('mp_year');

            me.initField();
        },

        buildField: function () {
            var me = this;
            me.items = [Ext.apply({
                xtype: 'numberfield',
                baseChars: '0123456789.,',
                decimalSeparator: ',',
                submitValue: true,
                maxLength: 18,
                maxValue: 100000000000,
                minValue: 0,
                itemId: 'mp_value',
                width: 70,
                allowBlank: false,
                allowNegative: false,
                listeners: {
                    validitychange: function (th, isValid, eOpts) {
                        if (isValid) me.getComponent('btnSave').enable();
                        else me.getComponent('btnSave').disable();
                    }
                }
            }, me.mp_valueCfg),
            Ext.apply({
                xtype: 'combo',
                itemId: 'mp_type',
                submitValue: true,
                matchFieldWidth: false,
                width: 70,
                valueField: 'type',
                displayField: 'name',
                store: storeMPTypes,
                mode: 'local',
                triggerAction: 'all',
                value: 1
            }, me.mp_typeCfg),
            Ext.apply({
                xtype: 'combo',
                submitValue: true,
                store: [[1, "01 - ??????"], [2, "02 - ???????"], [3, "03 - ????"], [4, "04 - ??????"],
                        [5, "05 - ???"], [6, "06 - ????"], [7, "07 - ????"], [8, "08 - ??????"], [9, "09 - ????????"],
                        [10, "10 - ???????"], [11, "11 - ??????"], [12, "12 - ???????"]],
                queryMode: 'local',
                matchFieldWidth: false,
                itemId: 'mp_month',
                value: 1,
                width: 70,
                editable: false
            }, me.mp_monthCfg),
            Ext.apply({
                xtype: 'combo',
                submitValue: true,
                store: [[2000, 2000], [2002, 2002], [2003, 2003],
                    [2004, 2004], [2005, 2005], [2006, 2006], [2007, 2007],
                    [2008, 2008], [2009, 2009], [2010, 2010], [2011, 2011],
                    [2012, 2012], [2013, 2013], [2014, 2014], [2015, 2015]],
                queryMode: 'local',
                itemId: 'mp_year',
                width: 70,
                value: 2013
            }, me.mp_yearCfg),
            { xtype: 'button', width: 35, itemId: 'btnSave', iconCls: 'savebtnbg', handler: function () { me.save(true) } },
            { xtype: 'button', width: 35, itemId: 'btnCancel', iconCls: 'cancelbtnbg', handler: function () { me.save(false) } }];
        },
        getValue: function () {
            return this.mp_valueField.getValue();
        },
        setValue: function (value) {
            var me = this;
            var curyear = RD.editingRecord.year > 0 ? RD.editingRecord.year : "";
            me.oldMarketPrice = RD.editingRecord.data["MarketPrice" + curyear];
            me.oldTypeID = RD.editingRecord.data["MarketPriceTypeID" + curyear];
            if (me.oldTypeID > 3)
                me.mp_typeField.show().setValue(3);
            else if (me.oldTypeID > 0)
                me.mp_typeField.show().setValue(parseInt(me.oldTypeID));
            else
                me.mp_typeField.show().setValue(1);
            me.mp_valueField.show().setValue(RD.editingRecord.data["MarketPrice" + curyear]);
            me.mp_monthField.show().setValue(parseInt(RD.editingRecord.data["MarketPriceMonth" + curyear]));
            if (curyear > 0) {
                me.mp_yearField.show().setValue(curyear);
                me.mp_yearField.disable().hide();
            } else {
                me.mp_yearField.show().setValue(RD.editingRecord.data["MarketPrice"] > 0 ? RD.editingRecord.data["MarketPriceYear"] : new Date().getYear());
                me.mp_yearField.enable().show();
            }
            me.getComponent('btnSave').show();
            me.getComponent('btnCancel').show();
            $("#mp_value-inputEl").focus();
        }
    });

Sorry that it's littlebit ugly, but it worked fine And I couldn't find better solution for that. The problem is shown at the screenshot:


But I need to see it like this:



I tried to set margin-top and change position by css and nothing helped. Margin differs cell by cell depends of containing text. It can be littlebit higher or lower, but never like I need.
Please help if you have any ideas or advices!

[scottmartin]

Try removing the width: 70 from each editor and then set your layout to

   layout: {
        type: 'vbox',
        alighn: 'stretch'
    },

[scottmartin]

In simple form:

Ext.define('RD.widget.MarketPriceField', {
    extend: 'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },

    alias: 'widget.marketpricefield',

    layout: {
        align: 'stretch',
        type: 'vbox'
    },

    defaults: {
        margin: '0 0 0 0'
    },

    initComponent: function() {
        var me = this;

        me.buildField();
        me.callParent();
    },

    buildField: function() {
        var me = this;

        me.items = [{
            xtype: 'numberfield',
            itemId: 'mp_value'
        }, {
            xtype: 'combo',
            submitValue: true,
            store: [
                [2011, 2011],
                [2012, 2012],
                [2013, 2013],
                [2014, 2014],
                [2015, 2015]
            ],
            queryMode: 'local',
            itemId: 'mp_year',
            value: 2013
        },
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'button',
                    flex: 1,
                    //width: 35,
                    itemId: 'btnSave'
                }, {
                    xtype: 'button',
                    flex: 1,
                    //width: 35,
                    itemId: 'btnCancel'
                }
                
            ]
        }
        ];
    }
});

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'change'],
    data: {
        'items': [{
            'name': 'Lisa',
            'email': '[email protected]',
            'change': 100
        }, {
            'name': 'Bart',
            'email': '[email protected]',
            'change': -20
        }, {
            'name': 'Homer',
            'email': '[email protected]',
            'change': 23
        }, {
            'name': 'Marge',
            'email': '[email protected]',
            'change': -11
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: {
            xtype: 'marketpricefield'
        },
        flex: 1
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1.5
    }, {
        header: 'Change',
        dataIndex: 'change'
    }],

    height: 200,
    width: 600,

    renderTo: Ext.getBody(),

    plugins: [cellEditing]
});

Scott.

[clauss]

I just had the same problem. The problem is that the CellEditor implementation uses the "l-l" alignment by default. This aligns the left center of your component to the left center of the cell's contents, which gives you the ugly alignment.

Switch to "tl-tl" alignment, which aligns the top left corner of your component to the top left corner of the cell, by overriding CellEditor's default alignment. This was tested with ExtJS 4.2.2.

/**
 * Align editors in grids to the top of the cell,
 * and not to the middle of the contents.
 */
Ext.override (Ext.grid.CellEditor, {
    alignment: "tl-tl"
});

[jmin91]

I just had the same problem. The problem is that the CellEditor implementation uses the "l-l" alignment by default. This aligns the left center of your component to the left center of the cell's contents, which gives you the ugly alignment.

Switch to "tl-tl" alignment, which aligns the top left corner of your component to the top left corner of the cell, by overriding CellEditor's default alignment. This was tested with ExtJS 4.2.2.

/**
 * Align editors in grids to the top of the cell,
 * and not to the middle of the contents.
 */
Ext.override (Ext.grid.CellEditor, {
    alignment: "tl-tl"
});

I know this is 2 years later but thank you so much for this override. We ran into this weird issue in Ext 6.2. Thanks!

[tellioglu]

Fantastic. Thank you very much. Allmost 5 years later using ExtJS 6.5.3.57, this is still very helpful!