Hybrid 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());
            }
        }]
    });

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

      0  

    Default


    Changed the listener slightly ... same issues:

    Code:
    listeners : {
    	change : function(field, newValue, oldValue) {
    		field.setRawValue(formatAsDollars(newValue));
    	}
    }

    When I click through the grid there are values that stay the same, so the "change" event isn't being fired. Okay, I get that. Should I listen for a different event? I'm loading the records into the form when the row is clicked as seen below:

    Code:
    listeners : {
    	selectionchange : function(model, records) {
    		if (records[0]) {
    			this.up('form').getForm().loadRecord(records[0]);

    Maybe I should just setValue for each textfield?

    Also ... IE9 completely freaks out on the load. The value shows correctly and then quickly is changed to zero and all the value flicker. I guess the values are being loaded over and over again to give that effect.

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

      0  

    Default


    Works, but UGLY and SLOW.

    Any alternatives?


    Code:
    selectionchange : function(model, records) {
    	if (records[0]) {
    		this.up('form').getForm().loadRecord(records[0]);
    		Ext.ComponentQuery.query('#valueBox')[0].update('<i>Value of account as of ' + Ext.util.Format.date(records[0].data.eolm, 'm/d/Y') + '</i>');
    		Ext.ComponentQuery.query('#estimateBox')[0].update('<i>Est monthly payment as of ' + Ext.util.Format.date(records[0].data.retirementRun, 'm/d/Y') + '</i>');
    		Ext.ComponentQuery.query('#compRate')[0].update('* ' + records[0].data.comp + '% annual compensation increase');
    		Ext.ComponentQuery.query('#investRate')[0].update('* ' + records[0].data.invest + '% annual investment growth');
    		Ext.ComponentQuery.query('#rpValueBox')[0].setValue(formatAsDollars(records[0].data.rpValue2));
    		Ext.ComponentQuery.query('#tasValueBox')[0].setValue(formatAsDollars(records[0].data.tasValue2));
    		Ext.ComponentQuery.query('#tdaValueBox')[0].setValue(formatAsDollars(records[0].data.tdaValue2));
    		Ext.ComponentQuery.query('#cmp01Box')[0].setValue(formatAsDollars(records[0].data.cmp01));
    		Ext.ComponentQuery.query('#cmp02Box')[0].setValue(formatAsDollars(records[0].data.cmp02));
    		Ext.ComponentQuery.query('#cmp03Box')[0].setValue(formatAsDollars(records[0].data.cmp03));
    		Ext.ComponentQuery.query('#adthBox')[0].setValue(formatAsDollars(records[0].data.adth$));
    		Ext.ComponentQuery.query('#adth13Box')[0].setValue(formatAsDollars(records[0].data.adth13$));
    		Ext.ComponentQuery.query('#adth23Box')[0].setValue(formatAsDollars(records[0].data.adth23$));
    		Ext.ComponentQuery.query('#disBox')[0].setValue(formatAsDollars(records[0].data.dis$$));
    		Ext.ComponentQuery.query('#totalValueBox')[0].setValue(formatAsDollars(records[0].data.totalValue));
    		Ext.ComponentQuery.query('#totalIncomeBox')[0].setValue(formatAsDollars(records[0].data.totalIncome));

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

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

      0  

    Default


    Thanks for the great response. I'll try this out shortly when I get a chance. Currently in the hospital with my son after a major surgery. I really appreciate the help.

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Hope all is well with your son.
    Spend time with your family - the code will wait.

Thread Participants: 1