Results 1 to 10 of 10

Thread: Formatting a textfield when record loaded

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium User
    Join Date
    Jan 2008
    Levittown, PA
    Vote Rating

    Default 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.

    	hideEmptyLabel : true,
    	xtype : 'textfield',
    	name : 'deathPayout',
    	margins : '0 5 5 0',
    	flex : 1,
    	listeners : {
    		change : function() {

    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.

    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) {
        }, {
            text: 'getValue()'
            , handler: function (btn) {
        }, {
            text: 'getRawValue()'
            , handler: function (btn) {

Posting Permissions

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