[SOLVED] Grid Cell Edit Changing Cell Value Without Input Changing

[rkanemeier]

I have a numbercolumn in an editable grid. Here is the definition:

{
            xtype: 'numbercolumn',
            format: '0.00',
            align: 'right',
            header: "<b>Factor (%)</b>",
            sortable: false,
            draggable: false,
            width: 100,
            dataIndex: 'FACTOR1',
            editor: {
                xtype: 'numberfield',
                hideTrigger: true,
                keyNavEnabled: false,
                mouseWheelEnabled: false,
                decimalPrecision: 2,
                minValue: '0.00',
                maxValue: '99.99'
            },
            renderer: applyBox

The value of FACTOR1 in the store is 70.00. When the grid is displayed, the value is 70.00. When I edit the cell, the value immediately changes to 70. When I press enter or tab, I get the red triangle in the upper left corner. I have an edit listener on the grid that checks the values to make sure something actually changed. I can confirm that the new value of the cell is 70 instead of 70.00. How do I force the "editor" to either display the trailing 0's or treat 70 as 70.00 so that it does not mark this cell as dirty?

[eweiler]

Check out the chatter on the topic over here:

http://stackoverflow.com/questions/1...-a-certain-pre

I've never done something exactly like that.

You may also want to set your minValue and maxValue as numbers instead of strings.

[Scott]

I kind of have a cell working the way you want the only thing is that is using 'usmoney' as the renderer. So, maybe you have to handle it in the renderer which you would have to do yourself because usmoney won't work in your case. Here is my column

			header: "<b>Amount</b>",
			dataIndex: 'KDAMT',
			align: 'right',
			renderer: 'usMoney',

			editor: {
				xtype: 'numberfield',
				allowBlank: false,
				hideTrigger: true,
				minValue: -99999999.99,
				maxValue: 99999999.99,
				selectOnFocus: true
			}

[rkanemeier]

Eric,

I made your proposed changes and the value when editing is still stripping off the trailing zeroes.

Scott,

I am using the following renderer function on all my number fields:

    // reset cell
    var applyBox = function(value, metadata) {
        //used to just be .attr in 3.x
  		metadata.tdAttr='style="border-style:solid; border-color:#c0c0c0; border-width:1px;"';
  		return Ext.util.Format.number(value, '0.00');
	};

[Scott]

In my version, the editor does strip off the trailing zeros when editing but the cell does not get marked as dirty unless you change the value. A value of 70.00 being displayed shows 70 in the editor, if you don't change it and tab out of the field then it shows 70.00 again and no triangle in the corner.

[eweiler]

Eric,

I made your proposed changes and the value when editing is still stripping off the trailing zeroes.

Can you post the changes you made then?

Did you make an override or extension to Numberfield?

[Johnny Major]

I believe this is what your looking for.

You can paste the below code directly in the inline editor in Ext docs...

Ext Docs based of the current Valence Ext version

//override for decimal precision
//
Ext.override(Ext.form.NumberField, {
    forcePrecision : false,
    valueToRaw: function(value) {
        var me = this,
            decimalSeparator = me.decimalSeparator;
        value = me.parseValue(value);
        value = me.fixPrecision(value);
        value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
        if (isNaN(value))
        {
            value = '';
        } else {
            value = me.forcePrecision ? value.toFixed(me.decimalPrecision) : parseFloat(value);
            value = String(value).replace(".", decimalSeparator);
        }
        return value;
    }
});

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":99.99},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":90.00},
        {"name":"Homer", "email":"home@simpsons.com", "phone":88.88},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":87.23}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var myGrid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
            header    : 'Name',
            dataIndex : 'name',
            editor    : 'textfield'
        },{
            header    : 'Email',
            dataIndex : 'email',
            flex      : 1,
            editor    : {
                xtype      : 'textfield',
                allowBlank : false
            }
        },{
            header    : 'Phone',
            dataIndex : 'phone',
            editor    : {
                xtype            : 'numberfield',
                forcePrecision   : true,
                decimalPrecision : 2
            },
            renderer  : function(v,m,r,rowIdx,colIdx){
                var cols = myGrid.headerCt.items,
                    col = cols.getAt(colIdx),
                    editor = col.getEditor(),
                    forcePrecision = (editor && editor.forcePrecision) ? true : false,
                    decimalPrecision = (forcePrecision) ? editor.decimalPrecision : null;

                if (forcePrecision){
                    if (decimalPrecision){
                        return v.toFixed(decimalPrecision);
                    }
                }
                return v;
            }
        }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});