Help adding change listener to NumberField

[jwdepetro]

I am very new to ExtJS and can't seem to find the answer to this. This is probably a very simple and easy question so here it goes:

I have a NumberField that I would like to configure a listener where it pops up with an error message if the NumberField value is larger than var max_seats (200). Here is what I have:

    new Ext.form.NumberField ({
            name: 'number_of_tickets',
            id: 'number_of_tickets',
            allowNegative: false,
            listeners:{
                'change':function(){
                    if(number_of_tickets>max_seats){
                            Ext.MessageBox.show({
                            title: 'Seat Selection Error',
                            msg: 'Please select fewer seats than ' + max_seats + '.',
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.ERROR
                        })
                    }
                }
            }
            })

Thanks for the help!

[Kachopsticks]

This does not show a message box, but will highlight the field in red and the form will not be valid.

    new Ext.form.NumberField ({
            name: 'number_of_tickets',
            id: 'number_of_tickets',//you may want to use autoRef instead
            allowNegative: false,
            maxValue: 200,
            maxText: 'Please select fewer seats than 200 seats.'
            })

If you want the message box you need to listen for the change event from the level of your form. Fields use vtypes which I believe continually run a validation function as long as you have text in the field. I don't think you can set listeners on a field when adding the field. There is no listener configuration. If I am wrong on that please correct me :-)

//The field code goes where ever you create your field, but if you create the field after rendering you will need to move the listener code out of the on render function and add the listener after adding your field.  I don't add fields after rendering so I always add my listeners in my onRender function.
    new Ext.form.NumberField ({ 
            name: 'number_of_tickets',
            ref: 'numberOfTicketsField',//you have to use ref for the below code to work, do this
            allowNegative: false,
            })

 onRender: function(ct, position){
        GLOBAL.yourForm.superclass.onRender.call(this, ct, position);
this.numberOfTicketsField.mon(this.numberOfTicketsField, 'keyup', this.numberOfTicketsFieldMonitor, this, {buffer: 500});
},
numberOfTicketsFieldMonitor: function(field){
        if (!Ext.isEmpty(this.numberOfTicketsField.getRawValue())) {
                 if(numberOfTicketsField.getRawValue() > 200){
                         Ext.MessageBox.show({                            title: 'Seat Selection Error',
                            msg: 'Please select fewer seats than ' + max_seats + '.',
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.ERROR
                        })
                 }
        }
},

Personally I like the top implementation better. If someone pastes in 2341234, every time they delete a number the message is going to show. That might be annoying to a user. Your call. Goodluck!

[jwdepetro]

Thanks for the post. I was able to acheive my desired results with the following:

            editor: new Ext.form.NumberField ({
            id: 'number_of_tickets',
            allowNegative: false,
            listeners:{
                valid : function(number_of_tickets){
                    var max_seats = sessionInfo.get('cart.maxTicketPurchase',20);  //Passing max_seats in as an object.
                    if(number_of_tickets.getValue() > max_seats){
                        number_of_tickets.setValue(max_seats);
                        Ext.MessageBox.show({
                        title: 'Max Seats Reached',
                        msg: 'Please select fewer seats than ' + max_seats + '.',
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.ERROR
                        });