Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    Answers
    2
    mjhaston is on a distinguished road

      0  

    Default Answered: Formatting a textfield when record loaded

    Answered: Formatting a textfield when record loaded


    When I click on a row in a grid I load my form. I want to format this textfield as US dollars so I do a little routine. My problem is ...

    a) If I use "setValue" .. I get an error message about "too much recursion" as soon as I click my row and the value is changed.

    b) If I use "setRawValue" .. my formatted output is correct the first time I load a record. If I click on a new row and some of that data matches the previous data .... those that match are shown without the formatting. The non-matching data appears correctly with formatting.


    Code:
    {
    	hideEmptyLabel : true,
    	xtype : 'textfield',
    	name : 'deathPayout',
    	margins : '0 5 5 0',
    	flex : 1,
    	listeners : {
    		change : function() {
    			this.setRawValue(formatAsDollars(this.value));
    		}
    	}
    }


    Code:
    	
    function formatAsDollars(value) {
    		var s = Ext.util.Format.usMoney(value);
    		return s.substring(0, s.indexOf('.'));
    	}

  2. I wasn't sure how to do what you're wanting actually so I took a look and below is what I came up with. If you extend textfield you can potentially just do setValue() (see the source for datefield) and get what you're after, though I wouldn't use my code below for production - I didn't test it too much and there's probably some validation that needs to happen.

    Code:
    Ext.define('MyTextfield', {
        extend: 'Ext.form.field.Text',
        alias: 'widget.dollarfield',
        
        rawToValue: function(rawValue) {
            //return this.parseDate(rawValue) || rawValue || null;
            return rawValue.replace(/\$|\,/g,'');
        },
    
    
        valueToRaw: function(value) {
            //return this.formatDate(this.parseDate(value));
            var s = Ext.util.Format.usMoney(value);
    		return s.substring(0, s.indexOf('.'));
        }
    });
    
    
    Ext.create('Ext.form.Panel', {
        title: 'Contact Info',
        width: 300,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'dollarfield',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false  // requires a non-empty value
        }]
        , tbar: [{
            text: 'setValue to 4000'
            , handler: function (btn) {
                btn.up('form').down('dollarfield').setValue(4000);
            }
        }, {
            text: 'getValue()'
            , handler: function (btn) {
                console.log(btn.up('form').down('dollarfield').getValue());
            }
        }, {
            text: 'getRawValue()'
            , handler: function (btn) {
                console.log(btn.up('form').down('dollarfield').getRawValue());
            }
        }]
    });

Thread Participants: 1