1. #1
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default Currency, Ext.form.NumberField and similar...

    Currency, Ext.form.NumberField and similar...


    Hi all,
    I'm trying to mix some code to obtain an Ext.form.NumberField able to show numbers in currency-like format.
    But, due to my (in)experience I can't find a really good path to obtain that I want...
    All code, already seen in others threads, are THAT code!!
    http://www.extjs.com/forum/showthread.php?t=48600 - Condor
    http://www.extjs.com/forum/showthread.php?t=35741 - NOSLOW
    PHP Code:
    Ext.namespace('Ext.ux');

    Ext.apply(Ext.util.Format, {
      
    // locale currency format, _MUST_ be defined in src\locale\ext-lang-****.js files
      
    numberFormat: {
        
    decimalSeparator',',
        
    decimalPrecision2,
        
    groupingSeparator'.',
        
    groupingSize3,
        
    currencySymbol:'\u20AC' //Euro symbol
      
    },
      
    formatNumber: function(valuenumberFormat){
        var 
    format Ext.apply(Ext.apply({}, Ext.util.Format.numberFormat), numberFormat);
        if (
    typeof value !== 'number') {
          
    value String(value);
          if (
    format.currencySymbol) {
            
    value value.replace(format.currencySymbol'');
          }
          if (
    format.groupingSeparator) {
            
    value value.replace(new RegExp(format.groupingSeparator'g'), '');
          }
          if (
    format.decimalSeparator !== '.') {
            
    value value.replace(format.decimalSeparator'.');
          }
          
    value parseFloat(value);
        }
        var 
    neg value 0;
        
    value Math.abs(value).toFixed(format.decimalPrecision);
        var 
    value.indexOf('.');
        if (
    >= 0) {
          if (
    format.decimalSeparator !== '.') {
            
    value value.slice(0i) + format.decimalSeparator value.slice(1);
          }
        }
        else {
          
    value.length;
        }
        if (
    format.groupingSeparator) {
          while (
    format.groupingSize) {
            
    -= format.groupingSize;
            
    value value.slice(0i) + format.groupingSeparator value.slice(i);
          }
        }
        if (
    format.currencySymbol) {
          
    value format.currencySymbol value;
        }
        if (
    neg) {
          
    value '-' value;
        }
        return 
    value;
      }
    });

    Ext.override(Ext.Component, {
      
    findParentBy: function(fn){
        for (var 
    this.ownerCt; (!= null) && !fn(p); p.ownerCt) ;
        return 
    p;
      },
      
    findParentByType: function(xtype){
        return 
    typeof xtype == 'function' this.findParentBy(function(p){
          return 
    p.constructor === xtype;
        }) : 
    this.findParentBy(function(p){
          return 
    p.constructor.xtype === xtype;
        });
      }
    });

    Ext.util.Format.currencyNull = function(val){
      
    //it's not better to define render with standard "numberRenderer" ??
      //var nr = Ext.util.Format.numberRenderer('0,000.00'); 
      
    if (val == null || val == '') {
        return 
    '';
      }
      else 
        if (
    val 999999999999) {
          return 
    '';
        }
        else {
          
    //return nr(val); // instead of "Ext.util.Format.formatNumber"
          
    return Ext.util.Format.formatNumber(val);
        }
    }

    Ext.ux.currencyField = function(config){
      var 
    defaultConfig = {
        
    allowDecimalstrue,
        
    allowNegativefalse,
        
    decimalPrecision2,
        
    maxValue1000000000,
        
    minValue0,
        
    valuenull,
        
    selectOnFocustrue,
        
    itemCls'rmoney'
      
    };
      
    Ext.ux.currencyField.superclass.constructor.call(thisExt.apply(defaultConfigconfig));
      
    this.on('change'this._onChangethis);
      
    this.on('initself'this._onInitSelf);
      
    this.on('focus'this._onFocus);
      
    this.on('blur'this._onBlur);
      
    this.on('render'this._onRender);
      
    this.currencyNumericValue config.value || null;
    }

    Ext.extend(Ext.ux.currencyFieldExt.form.NumberField, {
      
    currencyNumericValuenull,
      
    initSelf: function(){
        if (
    this.value === null || this.value === '') {
          
    this.currencyNumericValue null;
        }
        else {
          
    this.currencyNumericValue this.value;
        }
        
    this.setRawValue(this.formatter(this.currencyNumericValue));
        
    this.originalValue this.currencyNumericValue;
      },
      
    getValue: function(){
        if (
    this.value === '' || this.value === null) {
          return 
    null;
        }
        else 
          if (
    isNaN(this.value)) {
            
    this.value 0;
          }
          else {
            return 
    Number(this.value);
          }
      },
      
    _onChange: function(fieldnewValoldVal){
        if (
    newVal === '') {
          
    this.currencyNumericValue null
        
    }
        else {
          
    this.currencyNumericValue newVal 0;
        }
      },
      
    _onRender: function(cmp){
        
    this.setRawValue(this.formatter(this.currencyNumericValue));
        if (
    this.isFormField) {
          var 
    parentForm this.findParentByType('form');
          
    parentForm.on('actioncomplete', function(){
            
    cmp.initSelf();
          });
          
    parentForm.on('actionfailed', function(){
            
    cmp.initSelf();
          });
          
    parentForm.on('afterLayout', function(){
            
    cmp.initSelf();
          });
        }
      },
      
    formatter: function(value){
        if (
    value === 0) {
          return 
    Ext.util.Format.currencyNull("0");
        }
        else {
          return 
    Ext.util.Format.currencyNull(value);
        }
      },
      
    _onBlur: function(field){
        if (
    field.getRawValue() == '') {
          
    this.currencyNumericValue null;
        }
        else {
          
    this.currencyNumericValue field.getRawValue() - 0;
        }
        
    field.setRawValue(this.formatter(this.currencyNumericValue));
        if (
    this.currencyNumericValue !== this.value) {
          
    this.value this.currencyNumericValue;
        }
      },
      
    _onFocus: function(field){
        if (
    this.currencyNumericValue === null || this.currencyNumericValue === '') {
          
    field.setRawValue('');
        }
        else {
          
    field.setRawValue((this.currencyNumericValue 0).toFixed(this.decimalPrecision));
        }
      },
      
    initAllSiblings: function(){
        if (
    this.isFormField) {
          var 
    parentForm this.findParentByType('form');
          var 
    currencyFields parentForm.findByType('currencyfield');
          
    Ext.each(currencyFields, function(currencyfield){
            
    currencyfield.initSelf();
          });
        }
      }
    });

    Ext.ComponentMgr.registerType('currencyfield'Ext.ux.currencyField); 
    HTML test page
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
      <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <
    link rel="stylesheet" type="text/css" href="../../ext-3.1.0/resources/css/ext-all.css" />
        <
    script type="text/javascript" src="../../ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="../../ext-3.1.0//ext-all-debug.js"></script>
        <script type="text/javascript" src="currencyField.js"></script>
        <style>
          .rmoney .x-form-field {text-align: right;}
          .lmoney .x-form-field {text-align: left;}
        </style>
        <script type="text/javascript">
          Ext.onReady(function(){
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            var bd = Ext.getBody();
            bd.createChild({
              tag: 'h2',
              html: 'Dollar Field Demo'
            });
            bd.createChild({
              tag: 'p',
              html: 'Notice that unformatted dollar value gets submitted on save.'
            });
            var simple = new Ext.FormPanel({
              id: 'dollar-form',
              labelWidth: 75, // label settings here cascade unless overridden
              url: 'dollarFieldDemo.html',
              method: 'POST',
              frame: true,
              title: 'Simple Form',
              bodyStyle: 'padding:5px 5px 0',
              width: 350,
              defaults: {
                width: 230
              },
              defaultType: 'textfield',
              items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank: false
              }, {
                id: 'dollar',
                xtype: 'currencyfield',
                fieldLabel: 'Currency val',
                name: 'dollar',
                value: 12345.67,
                cls: 'currency-field',
                decimalPrecision: 5
              }, {
                id: 'dollar2',
                xtype: 'currencyfield',
                fieldLabel: 'Currency val2',
                name: 'dollar2',
                value: 1234567890.12345,
                //decimalSeparator: ',',
                cls: 'currency-field',
                decimalPrecision: 5
              }],
              buttons: [{
                text: 'Save',
                handler: function(){
                  Ext.getCmp('dollar-form').getForm().submit({
                    waitMsg: 'Saving...',
                    method: 'POST'
                  });
                }
              }, {
                text: 'Cancel'
              }, {
                text: 'Test',
                handler: function(){
                  alert(Ext.getCmp('dollar').getValue() + ' ' + Ext.getCmp('dollar2').getValue());
                }
              }]
            });
            simple.render(document.body);
          });
        </script>
      </head>
      <body>
      </body>
    </html> 
    Originally, the code from NOSLOW work better, but when I add € simbol, and invert group separator and decimal separator.....

    Thanks all
    Seek

  2. #2
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    Now, thanks to this post http://www.extjs.com/forum/showthread.php?t=5499, I've evolved my code as here:
    PHP Code:
    if (Ext.util.Format) {
        if (!
    Ext.util.Format.CurrencyFactory) {
            
    Ext.util.Format.CurrencyFactory = function(dpdSeparatortSeparatorsymbol){
                return function(
    n){
                    
    dp Math.abs(dp) + dp 2;
                    
    dSeparator dSeparator || ".";
                    
    tSeparator tSeparator || ",";
                    var 
    = /(\d+)(?:(\.\d+)|)/.exec(""), m[1].length m[1].length 0;
                    return (
    '-' '') +
                           (
    m[1].substr(0x) + tSeparator "") +
                           
    m[1].substr(x).replace(/(\d{3})(?=\d)/g"$1" tSeparator) +
                           (
    dp dSeparator + (+m[2] || 0).toFixed(dp).substr(2) : "") +
                           
    " " +
                           
    symbol;
                };
            }
        }
    };
    var 
    euroFormatter Ext.util.Format.CurrencyFactory(2","".""\u20AC");
    var 
    dollarFormatter Ext.util.Format.CurrencyFactory(2","".""$");

    Ext.namespace('Ext.ux');

    Ext.override(Ext.Component, {
      
    // override by Animal (http://extjs.com/forum/showthread.php?t=26484) that
      // allows us to find the dollar fields parent form. Very nice.
      
    findParentBy: function(fn){
        for (var 
    this.ownerCt; (!= null) && !fn(p); p.ownerCt)
          ;
        return 
    p;
      },
      
    findParentByType: function(xtype){
        return 
    typeof xtype == 'function' this.findParentBy(function(p){
          return 
    p.constructor === xtype;
        }) : 
    this.findParentBy(function(p){
          return 
    p.constructor.xtype === xtype;
        });
      }
    });

    Ext.ux.currencyField = function(config){
      
    // Add any numberfield default settings here:
      
    var defaultConfig = {
        
    allowDecimalstrue,
        
    allowNegativefalse,
        
    decimalPrecision2,
        
    maxValue1000000000,
        
    minValue0,
        
    valuenull,
        
    selectOnFocustrue,
        
    itemCls'rmoney'
      
    };
      
    Ext.ux.currencyField.superclass.constructor.call(thisExt.apply(defaultConfigconfig));
      
      
    this.on('change'this._onChangethis);
      
    this.on('initself'this._onInitSelf);
      
    this.on('focus'this._onFocus);
      
    this.on('blur'this._onBlur);
      
    this.on('render'this._onRender);
      
    this.currencyNumericValue config.value || null;
    }

    Ext.extend(Ext.ux.currencyFieldExt.form.NumberField, {
      
    currencyNumericValuenull,
      
    initSelf: function(){
        if (
    this.value === null || this.value === '') {
          
    this.currencyNumericValue null;
        }
        else {
          
    this.currencyNumericValue this.value;
        }
        
    this.setRawValue(this.formatter(this.currencyNumericValue));
        
    this.originalValue this.currencyNumericValue;
      },
      
    getValue: function(){
        if (
    this.value === '' || this.value === null) {
          return 
    null;
        }
        else
          if (
    isNaN(this.value)) {
            
    this.value 0;
          }
          else {
            return 
    Number(this.value);
          }
      },
      
    _onChange: function(fieldnewValoldVal){
        if (
    newVal === '') {
          
    this.currencyNumericValue null
        
    }
        else {
          
    this.currencyNumericValue newVal 0;
        }
      },
      
    _onRender: function(cmp){
        
    this.setRawValue(this.formatter(this.currencyNumericValue));
        if (
    this.isFormField) {
          var 
    parentForm this.findParentByType('form');
          
    parentForm.on('actioncomplete', function(){
            
    cmp.initSelf();
          });
          
    parentForm.on('actionfailed', function(){
            
    cmp.initSelf();
          });
          
    parentForm.on('afterLayout', function(){
            
    cmp.initSelf();
          });
        }
      },
      
    formatter: function(value){
        
    // detect app language & set the appropriate formatter
        
    if (value === 0) {
          return 
    euroFormatter("0");
        }
        else {
          return 
    euroFormatter(value);
        }
      },
      
    _onBlur: function(field){
        if (
    field.getRawValue() == '') {
          
    this.currencyNumericValue null;
        }
        else {
          
    this.currencyNumericValue field.getRawValue() - 0;
        }
        
    field.setRawValue(this.formatter(this.currencyNumericValue));
        if (
    this.currencyNumericValue !== this.value) {
          
    this.value this.currencyNumericValue;
        }
        
      },
      
    _onFocus: function(field){
        if (
    this.currencyNumericValue === null || this.currencyNumericValue === '') {
          
    field.setRawValue('');
        }
        else {
          
    field.setRawValue((this.currencyNumericValue 0).toFixed(this.decimalPrecision));
        }
      },
      
    initAllSiblings: function(){
        if (
    this.isFormField) {
          var 
    parentForm this.findParentByType('form');
          var 
    currencyFields parentForm.findByType('currencyfield');
          
    Ext.each(currencyFields, function(currencyfield){
            
    currencyfield.initSelf();
          });
        }
      }
    });

    Ext.ComponentMgr.registerType('currencyfield'Ext.ux.currencyField); 
    but still having problem when calling
    Code:
    isValid
    function....any suggestion?

  3. #3
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    I think to be on a right way, but maybe I run into a bug.
    Here the complete call stack
    Code:
    value is null ext-all-debug.js Line 35877
    validateValue(Object { name="value"})ext-all-debug.js  (line 35877)
    validateValue(Object { name="value"})currencyField.js (line 68)
    validate()ext-all-debug.js (line 35408)
    setValue(Object { name="v"})ext-all-debug.js  (line 35520)
    setValue(Object { name="v"})ext-all-debug.js (line 35862)
    setValue(Object { name="v"})ext-all-debug.js  (line 36385)
    beforeBlur()ext-all-debug.js  (line 36416)
    onBlur()ext-all-debug.js  (line 35375)
    h(Object { name="e"})ext-all-debug.js (line 1934)
    if(value.length < 1 || value === this.emptyText){  ext-all-debug.js  (line 35877)
    Maybe the red line must become:
    Code:
    if(value || value.length < 1 || value === this.emptyText)
    But in my component I can't understand why the event fires 2 times...
    PHP Code:
    if (Ext.util.Format) {
        if (!
    Ext.util.Format.CurrencyFactory) {
            
    Ext.util.Format.CurrencyFactory = function(dpdSeparatortSeparatorsymbol){
                return function(
    n){
                    if(!
    n){n=0;};
                    
    dp Math.abs(dp) + dp 2;
                    
    dSeparator dSeparator || ".";
                    
    tSeparator tSeparator || ",";
                    var 
    = /(\d+)(?:(\.\d+)|)/.exec(""), m[1].length m[1].length 0;
                    return (
    '-' '') +
                           (
    m[1].substr(0x) + tSeparator "") +
                           
    m[1].substr(x).replace(/(\d{3})(?=\d)/g"$1" tSeparator) +
                           (
    dp dSeparator + (+m[2] || 0).toFixed(dp).substr(2) : "") +
                           
    " " +
                           
    symbol;
                };
            }
        }
    };
    var 
    euroFormatter Ext.util.Format.CurrencyFactory(2","".""\u20AC");
    var 
    dollarFormatter Ext.util.Format.CurrencyFactory(2","".""$");

    Ext.namespace('Ext.ux');

    Ext.override(Ext.Component, {
      
    // override by Animal (http://extjs.com/forum/showthread.php?t=26484) that
      // allows us to find the dollar fields parent form. Very nice.
      
    findParentBy: function(fn){
        for (var 
    this.ownerCt; (!= null) && !fn(p); p.ownerCt)
          ;
        return 
    p;
      },
      
    findParentByType: function(xtype){
        return 
    typeof xtype == 'function' this.findParentBy(function(p){
          return 
    p.constructor === xtype;
        }) : 
    this.findParentBy(function(p){
          return 
    p.constructor.xtype === xtype;
        });
      }
    });

    Ext.ux.currencyField = function(config){
      
    // Add any numberfield default settings here:
      
    var defaultConfig = {
        
    //allowDecimals: true,
        //allowNegative: true,
        //decimalPrecision: 2,
        //maxValue: 1000000000,
        //minValue: 0,
        //value: null,
        
    selectOnFocustrue,
        
    itemCls'rmoney' // to right-align dollar field, define style: .rmoney .x-form-field {text-align:right;}
      
    };
      
    Ext.ux.currencyField.superclass.constructor.call(thisExt.apply(defaultConfigconfig));
      
      
    this.on('change'this._onChangethis);
      
    this.on('initself'this._onInitSelf);
      
    this.on('focus'this._onFocus);
      
    this.on('blur'this._onBlur);
      
    this.on('render'this._onRender);
      
    this.currencyNumericValue config.value || null;
    }

    Ext.extend(Ext.ux.currencyFieldExt.form.NumberField, {
      
    currencyNumericValuenull,
      
    validateValue : function(value){
        
    value this.currencyNumericValue;
          if(!
    Ext.form.NumberField.superclass.validateValue.call(thisvalue)){
            return 
    false;
          }
          return 
    true;
      },
      
    initSelf: function(){
        
    // When form loads, bare number is loaded and displayed. Call this (via listener, typically)
        // to format value to dollar.
        
    if (this.value === null || this.value === '') {
          
    this.currencyNumericValue null;
        }
        else {
          
    this.currencyNumericValue this.value;
        }
        
    this.setRawValue(this.formatter(this.currencyNumericValue));
        
    // prevent field from reporting itself as "dirty" after form load (isDirty check):
        
    this.originalValue this.currencyNumericValue;
      },
      
    getValue: function(){
        
    //return this.value+"".replace(/[^0-9.-]/g,"")-0; strip out any formatting characters from string.
        
    if (this.value === '' || this.value === null) {
          return 
    null;
        }
        else
          if (
    isNaN(this.value)) {
            
    this.value 0;
          }
          else {
            return 
    Number(this.value);
          }
      },
      
    _onChange: function(fieldnewValoldVal){
        
    // n will always be unformatted numeric as STRING! So "-0" to force numeric type:
        
    if (newVal === '') {
          
    this.currencyNumericValue null
        
    }
        else {
          
    this.currencyNumericValue newVal 0;
        }
      },
      
    _onRender: function(cmp){
        
    this.setRawValue(this.formatter(this.currencyNumericValue));
        if (
    this.isFormField) { // Is this check necessary?
          
    var parentForm this.findParentByType('form');
          
    /*
           Note: If client-side validation is enabled, unformatted numbers get posted on save. Good!
           (The field's "isValid" method just does this for some reason, which works to our advantage.)
           BUT (there's always a "but"), we then need to apply back the dollar formatting so that the
           numbers aren't left displayed as plain.
           */
          // Format dollar after successful form save:
          
    parentForm.on('actioncomplete', function(){
            
    cmp.initSelf();
          });
          
    // Format back to dollar after failed save attempt.
          
    parentForm.on('actionfailed', function(){
            
    cmp.initSelf();
          });
          
    // doLayout is called on initial page load.
          
    parentForm.on('afterLayout', function(){
            
    cmp.initSelf();
          });
          
    // Formats dollar after client-side validation fails...maybe...still investigating this.
          // parentForm.on('beforeaction', function(){cmp.initSelf();});
          /*
           Depends on order of any success/actioncomplete/actionfailed listeners???
           Or maybe you are checking if the form isValid yourself by listening to the
           form's beforeaction, type action.type=='submit' and then returning false to
           cancel the action. Still looking into all this.
           More on clientValidation:
           Before the form submits (doAction 'submit' with clientValidation not set to false...
           from docs: "If undefined, pre-submission field validation is performed.") the call
           to form "isValid" will turn the dollarfield back to a plain, unformatted number,
           which will get posted.
           */
        
    }
      },
      
    formatter: function(value){
            if (
    value === '') {
          return 
    '';
        }
        else {
          return 
    euroFormatter(value);
        }
      },
      
    _onBlur: function(field){
        
    /* always update dollarNumericValue with the actual RawValue (which right here (onBlur) will
           *always* be numeric (remember: when focused, it's unformatted numeric entry...just like
           numberfield does. So onBlur, grab that numeric value and save it to this.dollarNumericValue,
           then apply formatting back to RawValue for display.
        */
        
    if (field.getRawValue() == '') {
          
    this.currencyNumericValue null;
        }
        else {
          
    this.currencyNumericValue field.getRawValue() - 0;
        }
        
    field.setRawValue(this.formatter(this.currencyNumericValue));
        if (
    this.currencyNumericValue !== this.value) {
          
    /* for some reason, when zero'ing out a value (or clearing), the onChange event is not firing
             and this.value is not getting set to the new zero or blank value. This fixes that:
          */
          
    this.value this.currencyNumericValue;
        }
      },
      
    _onFocus: function(field){
        if (
    this.currencyNumericValue === null || this.currencyNumericValue === '') {
          
    field.setRawValue('');
        }
        else {
          
    // remove formatting by restoring RawValue to dollarNumericValue.
          
    field.setRawValue((this.currencyNumericValue 0).toFixed(this.decimalPrecision));
        }
      },
      
    initAllSiblings: function(){
        
    /* Perhaps useful to call this manually when having trouble getting the event listeners straightened
           out as described above
        */
        
    if (this.isFormField) { // Is this check necessary?
          
    var parentForm this.findParentByType('form');
          var 
    currencyFields parentForm.findByType('currencyfield');
          
    Ext.each(currencyFields, function(currencyfield){
            
    currencyfield.initSelf();
          });
        }
      }
    });
    Ext.ComponentMgr.registerType('currencyfield'Ext.ux.currencyField); 
    Any help will be appreciated
    Seek

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I think a currency plugin for the NumberField class would work much better.

    Remove any currency sign, commas etc on focus, and format according to configured currency or format string on blur if valid.

  5. #5
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    I think a currency plugin for the NumberField class would work much better.

    Remove any currency sign, commas etc on focus, and format according to configured currency or format string on blur if valid.
    You are talking about something like this?
    (sorry if I take advantage from you)
    PHP Code:
    Ext.ux.campoValuta = function(config){
      
    Ext.apply(thisconfig);
    };

    // plugin code
    Ext.extend(Ext.ux.campoValutaExt.form.NumberField, {
      
    init: function(campo){
        
    campo.numberValue campo.value;
      },
      
    focus: function(selectTextdelay){
        
    this.value this.numberValue;
      },
      
    blur: function(campo){
        
    this.setValue(currencyFormatter(this.numberValue));
      },
      
    onRender: function(ctposition){
        
    this.value currencyFormatter(this.numberValue);
      }
    }); 

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well, the idea is there, but I really like the idea of plugins.

  7. #7
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Well, the idea is there, but I really like the idea of plugins.
    Could you provide me a simple example about a plugin with Ext.form.****Field?
    I try and retry, but I can't do it without a suitable example, all samples about plugin can't give me the correct idea on how to implement it...

    Thanks for all help you can give me!
    Seek

  8. #8
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    Maybe I found what are you exactly talking about....
    PHP Code:
    Ext.ux.dispCurr = function(){
      
    this.init = function(tp){
        
    edit tp;
        
    edit.on('blur'onBlur);
        
    edit.on('focus'onFocus);
      }
      function 
    onBlur(){
      }
      function 
    onFocus(){
      }
    }; 
    (Excuse me if I press you...)

  9. #9
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    I almost see the light...
    How to replace the rawvalue with another value before submit ??

    Thanks
    PHP Code:
    Ext.ux.dispCurr = function(){
      var 
    editcurrencyNumericValuectxItem;
      
    this.init = function(tp){
        
    edit tp;
        
    readApexValue();
        if (
    == '') {
          
    currencyNumericValue null;
        }
        else {
          
    currencyNumericValue v;
        }
        
    edit.on('blur'onBlur);
        
    edit.on('focus'onFocus);
        
    edit.on('afterrender'afterrender);
        
    //edit.on('post', onPost);
      
    }
      
    //I must fight with Oracle Application Express....
      
    function readApexValue(){
        var 
    edit.getRawValue();
        if (
    === "") {
          return 
    null;
        };
        
    Number(v.replace(/,/, "."));
        return 
    v;
      }
      
      function 
    onBlur(){
        var 
    readApexValue();
        if (
    === '') {
          
    currencyNumericValue null;
        }
        else {
          
    currencyNumericValue c;
        }
        
    edit.setRawValue(Ext.util.Format.currencyFormatter(currencyNumericValue));
        if (
    currencyNumericValue !== edit.value) {
          
    edit.value currencyNumericValue;
        }
      }
      
      function 
    onFocus(){
        if (
    currencyNumericValue === null || currencyNumericValue === '') {
          
    edit.setRawValue('');
        }
        else {
          
    edit.setRawValue((currencyNumericValue 0).toFixed(edit.decimalPrecision));
        }
      }
      
      function 
    afterrender(){
        
    edit.setRawValue(Ext.util.Format.currencyFormatter(currencyNumericValue));
      }
      
    //  function onPost(){
    //    edit.setRawValue(currencyNumericValue);
    //  }
    }; 

  10. #10
    Ext User
    Join Date
    Mar 2010
    Posts
    2
    Vote Rating
    0
    ToZie is on a distinguished road

      0  

    Default


    Quote Originally Posted by seek View Post
    I almost see the light...
    How to replace the rawvalue with another value before submit ??
    I have taken an Idea from Saki to work around this submit problem. A hidden field with same name and name removed from original field will do the trick if the raw value is maintained there.

    PHP Code:
    Ext.ns('Ext.ux.form');

    Ext.ux.form.xNumberField Ext.extend(Ext.form.NumberField, {
        
    displayUnitnull,
        
    forcePrecisionnull,
        
    setValue: function(value) {
            if (!
    this.hiddenField) {
                
    this.hiddenField this.el.insertSibling({
                    
    tag'input',
                    
    type'hidden',
                    
    namethis.name
                
    });
                
    this.hiddenName this.name;
                
    this.el.dom.name null;
                
    this.el.on({
                    
    blur: {
                        
    scopethis,
                        
    fnthis.doBlur
                    
    },
                    
    focus: {
                        
    scopethis,
                        
    fnthis.doFocus
                    
    },
                    
    keyup: {
                        
    scopethis,
                        
    fnthis.doKeyup
                    
    }
                });
            }
            
    this.setRawValue(value);    
            
    this.initField();        
        },
        
    doBlur: function() {
            
    this.updateHidden();    
            
    this.setRawValue(this.formatValue(this.getValue()));
        },
        
    doFocus: function() {
            
    this.setRawValue(this.hiddenField.dom.value);
        },
        
    doKeyup: function() {
            
    this.updateHidden();
        },
        
    updateHidden: function() {
            var 
    value this.getValue();
            
    value value.toString().replace(/\./, ",");
            
    this.hiddenField.dom.value value;
        },
        
    initField: function() {
            
    this.updateHidden();
            
    this.setRawValue(this.formatValue(this.getValue()));        
        },
        
    getRawValue: function() {
            return 
    this.hiddenField.dom.value;
        },
        
    formatValue: function(value) {
            
    value parseFloat(value); 
            if (!
    value) { 
                
    value 
            
    };
            if (
    this.forcePrecision && (this.forcePrecision 0)) {
                
    value value.toFixed(this.forcePrecision);
            }
            
    value value.toString().replace(/\./, ",");
            if (
    this.displayUnit) {
                
    value value this.displayUnit;
            }
            return 
    value;
        }    
    });
    Ext.reg('xnumberfield'Ext.ux.form.xNumberField); 
    There are some inconsistencies in IE8, tabbing in the field does not mark it's content (since the content get's overwritten on Focus).

    lg

    Torsten