1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    300
    Answers
    2
    Vote Rating
    1
    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
    300
    Answers
    2
    Vote Rating
    1
    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
    300
    Answers
    2
    Vote Rating
    1
    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
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    300
    Answers
    2
    Vote Rating
    1
    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
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


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

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

      0  

    Default


    I demo my app today and found 1 to 2 second delay from the time I select a row in my grid to the time the fields actually got populated. I was able to switch all of my textfield to you dollarfield and that works GREAT. Lightening fast!

    I still have about 6 fields that are xtype : 'box' that I need to update text in. I have them all comment out and it's flying. The minute I uncomment one of these fields out, I go back to that noticable delay. It gets worse with each line of code I introduce.

    Code:
    Ext.ComponentQuery.query('#compRate')[0].update('* ' + records[0].data.comp + '% annual compensation increase');
    
    
    Ext.ComponentQuery.query('#valueBox')[0].update('<i>Value of account as of ' + Ext.util.Format.date(records[0].data.eolm, 'm/d/Y') + '</i>');

    I've read where I'm not supposed to use Ext.getCmp ... but I've never seen lag time like this!

    Any way to NOT use this method to update these fields?

    I suppose the lag could be caused by my 3500 line source code that the query has to weed through!

  9. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    You might set up a ref for the components that you're commonly querying for.
    http://docs.sencha.com/extjs/4.2.0/#...oller-cfg-refs

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

      0  

    Default


    Unfortunately I'm not using MVC. I need to learn it and use it, but I'm not there yet!

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

      0  

    Default


    Found this suggestion elsewhere on a similar topic and it seems to have cut down my wait on each load from 2 seconds to .5 seconds.

    Code:
    Ext.suspendLayouts();
    form.loadRecord(foo);
    Ext.resumeLayouts(true);

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar