Results 1 to 6 of 6

Thread: Custom fields' editors positioning in ExtJS 4.2.1

  1. #1
    Sencha User
    Join Date
    Sep 2013
    Posts
    4

    Default Custom fields' editors positioning in ExtJS 4.2.1

    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:

    Code:
    editor: { xtype: 'marketpricefield' }
    Here is full code of the editor:

    Code:
    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!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

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

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

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    In simple form:

    Code:
    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Germany
    Posts
    1

    Default

    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.

    Code:
    /**
     * 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"
    });
    Last edited by clauss; 7 Jul 2014 at 11:01 PM. Reason: Fixed a typo

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2014
    Location
    New Jersey
    Posts
    166

    Default

    Quote Originally Posted by clauss View Post
    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.

    Code:
    /**
     * 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!

  6. #6
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Vienna, Austria
    Posts
    59

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •