How to write custom validation for columns in row edit plugin in EXTJS

Question

I am new to EXTJS. I am using RowEditing plugin in grid panel to edit a row.

When user enters a value, I want to check if the entered value exists between a certain range. Example: 1 and 100. This value range differs for different columns in the row. How to write this custom validation?

This is my code. I want to write custom validation for Sampling interval and Latency interval.

deployAnalyticsGridView = Ext.create(
                    'paginggrid.view', {
                        store : THIS.GridStore,
                        region : 'center',
                        title : '--------',
                        selType : 'checkboxmodel',
                        multiSelect : true,
                        enableSearch : true,
                        searchColumns : ["Name", "Sampling Interval", "Latency  Interval","Threshold"],
                        defaultColumnSelection : 2,
                        // grid columns
                        columns : [{
                                    id : 'name',
                                    text : "Name",
                                    dataIndex : 'hostName',
                                    flex : 1

                                }, {
                                    id : 'SamplingInterval',
                                    text : " Sampling Interval",
                                    dataIndex : 'SamplingInterval',
                                    flex : 1,
                                      editor: {
                                            xtype: 'numberfield',
                                            allowBlank: false,
                                            flex : 1
                                        }
                                }, {
                                    id : 'LatencyInterval',
                                    text : "Latency Interval",
                                    dataIndex : 'LatencyInterval',
                                    flex : 1,
                                      editor: {
                                            xtype: 'numberfield',
                                            allowBlank: false,
                                            flex : 1
                                        }
                                }, {
                                    id : 'LatencyThreshold',
                                    text : "Latency Threshold",
                                dataIndex :'LatencyThreshold',
                                    flex : 1,
                                    editor: {
                                        xtype: 'numberfield',
                                        allowBlank: false,
                                        flex : 1
                                    }
                                }
                        ],
                         plugins: [                                Ext.create('Ext.grid.plugin.RowEditing', {
                                       clicksToEdit: 2
                                   })],
                        actionButtons : [this.Action1 , this.sAction2]
                    });

Guy Fawkes Guy Fawkes · Accepted Answer · 2014-03-31T19:25:51

You just need to properly configure editor for your field. You can use code like this:

        {
            text: "Some Number", 
            width:120, 
            dataIndex: 'num',
            editor : {
                xtype: 'numberfield',
                allowBlank:false,
                validator: function(value) {
                    return (value > 5 && value < 100) || 'Number must be > 5 and < 100';
                }
            }
        },

Fully working example here: http://jsfiddle.net/guyfawkes/q3TnT/

How to write custom validation for columns in row edit plugin in EXTJS

1 Answers