[SOLVED] Problem Using maxvalue validation on a numberfield

[rkanemeier]

I used the auto-code generator to generate a grid. I copied some of the code from the ticket manager example to double click on the grid to bring up a form to edit the details. I noticed the form kept causing a MSGW when we specified a numeric value greater than what the database field can hold (makes sense). I searched through the ExtJS documentation and found a maxvalue method. My code looks like this:

                  {
                    xtype:'numberfield',
                    id:'add_LPIPRICE1',
                    autoCreate:{
                        tag:'input',
                        maxlength:'9',
                        maxvalue:'999999.99'
                    },
                    fieldLabel:'LEVEL 1 PRICE'
                },

I also tried it this way:

                  {
                    xtype:'numberfield',
                    id:'add_LPIPRICE1',
                    autoCreate:{
                        tag:'input',
                        maxlength:'9'
                    },
                    maxvalue:'999999.99',
                    fieldLabel:'LEVEL 1 PRICE'
                },

I was under the impression that this configuration would perform some sort of UI validation so that the ajax call would not fire when the user presses the save button. However, I can repeatedly save (without error) when I enter 9999999, which will trigger a chain of MSGW's in the VALENCE30 QHTTPSVR jobs.

How should "front end" validation be performed in this scenario?

[eweiler]

EDIT for Typos:

Looks like you have maxvalue instead of maxValue as well as a string value instead of a number for 99999.99

This looks to me like Ext 3.x so try this way:

{
  xtype: 'numberfield',
  maxValue: 999999.99,
...
}



your save methods:

if (myForm.getForm().isValid()) {
  //do ajax save
} else {
  //you should apply custom error marking or behavior here but
  // doing an isValid() should mark invalid fields with red.
}

[rkanemeier]

Edited. Your corrections answered my questions.

[eweiler]

Very sorry. You are correct. I had a typo in my post and fixed it.

I also added these two items about the syntax.

[rkanemeier]

Ok, so I added maxvalue and I added the isValid logic to the function that is submitting the ajax request to update the record. It's no longer executing the ajax request, however, it's not highlighting any fields.

Am I incorrect in thinking that the maxValue method should have automatically attached validation to the numberfield?

[eweiler]

isValid should mark any invalid fields blank in Ext 4 but Ext 3.4 does not specify that.

You can put a .getForm().markInvalid() in your non valid statement.

Please reference the docs, they are very detailed and easy to navigate.

Ext 4 Basic Form:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic

Ext 3 Basic Form
http://docs.sencha.com/ext-js/3-4/#!...method-isValid


Ext GUIDES!! (I really like these)
http://docs.sencha.com/ext-js/4-0/#!/guide

[rkanemeier]

Thanks for the pointer.

Final question. How do I know if I'm using Extjs 3.4 or 4.0? I used the grid auto-coder to generate the app.

[sean.lanktree]

That is Ext 3.4. You can always tell by looking at what version of "ext-all.js" is used by your program. If /extjs4/ext-all.js, then it is Ext 4. If /extjs/ext-all.js, then it is Ext 3.4.

[rkanemeier]

(This is more for people who find themselves in this thread looking for how to do something).

The only way I could get this to work is to define a separate object as a number field, then apply the maxValue to it. I went from defining the field as an xtype inside the form, to referencing the object in the items as such:

    var priceField1 = new Ext.form.NumberField({
        id:'edit_LPIPRICE1',
        decimalPrecision:'3',
        maxValue:'999999.999',
        fieldLabel:'LEVEL 1 PRICE',
        listeners: {
            invalid: function(field, msg) {
                Ext.Msg.alert('', msg);
            }
        }
    });

...further into the form field definitions....

			items: [{																									
				xtype:'fieldset',																						
				title: ' ',																								
				layout: 'form',																							
				autoHeight: true,																						
				iconCls: 'pencil',																						
				labelAlign: 'right',																					
				labelWidth: 200,																						
				defaults: {																								
					anchor: '-10'																						
				},																										
                items:[{
                    xtype:'displayfield',
                    id:'edit_LPLOCATE',
                    fieldLabel:'LOCATION'
                },{
                    xtype:'displayfield',
                    id:'edit_LPPOOL',
                    fieldLabel:'POOL'
                },{
                    xtype:'displayfield',
                    id:'edit_LPPARTNO',
                    fieldLabel:'PART NBR'
                },{
                    xtype:'numberfield',
                    id:'edit_LPSEGLVL',
                    autoCreate:{
                        tag:'input',
                        maxlength:'7'
                    },
                    fieldLabel:'SEGMENT LEVEL'
                },
                priceField1,
                
    /*            {
                    xtype:'numberfield',
                    id:'edit_LPIPRICE1',
                    autoCreate:{
                        tag:'input',
                        maxlength:'9',
                        maxvalue:'999999.99'
                    },
                    fieldLabel:'LEVEL 1 PRICE'
                }, */
                
                {
                    xtype:'numberfield',
                    id:'edit_LPIPRICE2',
                    autoCreate:{
                        tag:'input',
                        maxlength:'9'
                    },
                    fieldLabel:'LEVEL 2 PRICE'
                }......