Number field with currency symbol, thousand separator with international support

[posta]

We new property need - ThousandSeparator - can be change to any leters.

thanks

[brittongr]

We new property need - ThousandSeparator - can be change to any leters.

thanks

@posta, i just updated the version of NumericField, now you can use any character as thousandSeparator... please let me know if you have any issue...

[posta]

It's work very well.

New Property for realization:

currencySymbol can be to BEGIN (as now - before value) and to END (after value).

) nice work!

[sussdorff]

First of all the Numeric field works like a charm for EUR signs. Really great..

Yet, I stumbled upon a problem that if I execute myform.getForm().submit using a button, the rendered value will be passed to my application, not the data. Which is what I should have expected in the first place, I think, but maybe I'm actually doing something wrong.

With the roweditor it is not a problem, as there I pass the parameters using the record.data. Is this same method possible with BasicForm as well and if yes, how do I access my value.

if record.data.myvariable works, would it be as simple as myform.data.myvariable (then I need to debug).

[brittongr]

First of all the Numeric field works like a charm for EUR signs. Really great..

Yet, I stumbled upon a problem that if I execute myform.getForm().submit using a button, the rendered value will be passed to my application, not the data. Which is what I should have expected in the first place, I think, but maybe I'm actually doing something wrong.

With the roweditor it is not a problem, as there I pass the parameters using the record.data. Is this same method possible with BasicForm as well and if yes, how do I access my value.

if record.data.myvariable works, would it be as simple as myform.data.myvariable (then I need to debug).

Hi sussdorff, let me tell you that is a known issue for me, but it doesn't regards to NumericField and the same thing happens when you use a comboBox like this:

new Ext.form.ComboBox({
                name: 'combobox',
                store: new Ext.data.ArrayStore({
                    fields:['id', 'display'],
                    data:[[1, 'My First Name'], [2, 'My Last Name']]
                }),
                valueField:'id',
                displayField: 'display',
                mode:'local',
                triggerAction:'all',
                editable:false
            }),

if you add that combo box to your form where you are using Ext.ux.NumericField, i will expect that you see in your params 'My First Name' or 'My Last Name' instead of "1" or "2" when you do a submit, or also you can try this: after the form is rendered you can set a value to numericField and then display it using this

alert('Value ' + numericField.getValue() + ', RawValue ' + numericField.el.getValue());

You will notice they are different and because the ajax request take as param this.form.el.dom at this point the raw value is submitted instead expected value...

In extjs 4 it seems to be an easy way to submit the value using a function to processRawValue but i haven't played with extjs 4 yet, so i handle that using an override of Ext.form.Action.Submit and here is the code:

original code (taken from extjs 3.3.1):

run : function(){
        var o = this.options,
            method = this.getMethod(),
            isGet = method == 'GET';
        if(o.clientValidation === false || this.form.isValid()){
            if (o.submitEmptyText === false) {
                var fields = this.form.items,
                    emptyFields = [];
                fields.each(function(f) {
                    if (f.el.getValue() == f.emptyText) {
                        emptyFields.push(f);
                        f.el.dom.value = "";
                    }
                });
            }
            Ext.Ajax.request(Ext.apply(this.createCallback(o), {
                form:this.form.el.dom,
                url:this.getUrl(isGet),
                method: method,
                headers: o.headers,
                params:!isGet ? this.getParams() : null,
                isUpload: this.form.fileUpload
            }));
            if (o.submitEmptyText === false) {
                Ext.each(emptyFields, function(f) {
                    if (f.applyEmptyText) {
                        f.applyEmptyText();
                    }
                });
            }
        }else if (o.clientValidation !== false){ // client validation failed
            this.failureType = Ext.form.Action.CLIENT_INVALID;
            this.form.afterAction(this, false);
        }
    },

this is my override. You can include this in a helper.js or overrides.js file and use it in all your pages where you are using NumericField

Ext.override(Ext.form.Action.Submit, 
{
run: function(){
        var o = this.options, method = this.getMethod(), isGet = method == 'GET';
        
        if (o.clientValidation === false || this.form.isValid()) 
        {
            /*if (o.submitEmptyText === false) 
            {*/
                var fields = this.form.items, emptyFields = [];
                fields.each(function(f){
                    if (o.submitEmptyText === false) 
                    {
                        if (f.el.getValue() == f.emptyText) 
                        {
                            emptyFields.push(f);
                            f.el.dom.value = "";
                        }
                    }
                    else
                        f.el.dom.value = f.getValue();  
                });
                
            //}
            
            Ext.Ajax.request(Ext.apply(this.createCallback(o), 
            {
                form: this.form.el.dom,
                url: this.getUrl(isGet),
                method: method,
                headers: o.headers,
                params: !isGet ? this.getParams() : null,
                isUpload: this.form.fileUpload
            }));
            if (o.submitEmptyText === false) 
            {
                Ext.each(emptyFields, function(f){
                    if (f.applyEmptyText) 
                    {
                        f.applyEmptyText();
                    }
                });
            }
        }
        else 
            if (o.clientValidation !== false) 
            { // client validation failed
                this.failureType = Ext.form.Action.CLIENT_INVALID;
                this.form.afterAction(this, false);
            }
    }
});

I really don't know if there is an easy way... but this works for me...

[sussdorff]

Thanks a lot Greivin,

your override allows me to correctly save the values .

Sadly, when saving, it also "unrenders" the form values, so I see the values which have been sent. I thought, oh well, just reload the form again, but that did not help, so I am wondering what I am doing wrong.

                budget_form.getForm().submit({
                    method:'GET',
                    waitTitle:'Connecting',
                    waitMsg:'Sending data...',
                    url:'budget-data',
                    params: { action: 'save_budget',
                              budget_id: '@budget_id@' },
                    success: function(res){
                        Ext.Msg.alert('Status', 'Saving successful');
                        budget_form.getForm().load();
                    },

[sussdorff]

Thanks a lot Greivin,

your override allows me to correctly save the values .

Sadly, when saving, it also "unrenders" the form values, so I see the values which have been sent. I thought, oh well, just reload the form again, but that did not help, so I am wondering what I am doing wrong.

The goal is for the end user to continue to see the rendered numeric field once he has hit the submit button. And maybe I should start playing with ExtJS 4.0 instead :-).

    budget_form.getForm().load({
        url:'budget-data',
        params: {
            action: 'get_budget', budget_id: @budget_id@},
        failure: function(response){
            var result=response.responseText;
            Ext.MessageBox.alert(result,'could not connect to database');
        }
    });

 
        buttons: [{
            text: 'Save',
            handler:function(){
                budget_form.getForm().submit({
                    method:'GET',
                    waitTitle:'Connecting',
                    waitMsg:'Sending data...',
                    url:'budget-data',
                    params: { action: 'save_budget',
                              budget_id: '@budget_id@' },
                    success: function(res){
                        Ext.Msg.alert('Status', 'Saving successful');
                        budget_form.getForm().load();
                    },
                    failure: function(result, req){
                        Ext.MessageBox.alert(result,'could not connect to database');
                    }
                });
            }
        }]

[brittongr]

Well lets see if this one doesn't bring a hidden issue
Forget the last override... try this...

//Basic Form
Ext.override(Ext.form.Action.Submit, 
{
    run: function(){
        var o = this.options, method = this.getMethod(), isGet = method == 'GET';
        
        if (o.clientValidation === false || this.form.isValid()) 
        {
            if (o.submitEmptyText === false) 
            {
                var fields = this.form.items, emptyFields = [];
                fields.each(function(f){
                    if (f.el.getValue() == f.emptyText) 
                    {
                        emptyFields.push(f);
                        f.el.dom.value = "";
                    }
                });
            }
            
            Ext.Ajax.request(Ext.apply(this.createCallback(o), 
            {
                //form: this.form.el.dom, //Commenting this to avoid duplicated parameters
                url: this.getUrl(isGet),
                method: method,
                headers: o.headers,
                params: !isGet ? this.getParams() : null,
                isUpload: this.form.fileUpload
            }));
            if (o.submitEmptyText === false) 
            {
                Ext.each(emptyFields, function(f){
                    if (f.applyEmptyText) 
                    {
                        f.applyEmptyText();
                    }
                });
            }
        }
        else 
            if (o.clientValidation !== false) 
            { // client validation failed
                this.failureType = Ext.form.Action.CLIENT_INVALID;
                this.form.afterAction(this, false);
            }
    }
});

And in your save function you should do it like this

{
            text: 'Save',
            handler: function()
            {
                var params = simple.getForm().getFieldValues(false); //false to get all fields not only dirty ones
                params.action = 'save_buget';
                params.budget_id = '@budget_id@';

                //Other params here

                simple.getForm().submit(
                {
                    waitMsg:'Saving Data...',
                    params: params,                     
                    success: function()
                    {
                        alert('success');
                    },
                    failure: function()
                    {
                        alert('failure');
                    }
                });
            }
        },

[paffinito]

Hi,

i have made some changes:

1. initComponent for check valid arguments
2. onRender to resolve problem in submit with hidden field
3. currencySymbolPosition argument (before/after)
4. numberFieldAlign argument (left/right)

I hope it is useful

[posta]

Hi,

i have made some changes:

1. initComponent for check valid arguments
2. onRender to resolve problem in submit with hidden field
3. currencySymbolPosition argument (before/after)
4. numberFieldAlign argument (left/right)

I hope it is useful

It's good. But in RUN-mode - don't in order in Form. Test It.