如何为EXTJS中的行编辑插件中的列编写自定义验证

时间:2014-03-31 19:15:48

标签: extjs

我是EXTJS的新手。我在网格面板中使用RowEditing插件来编辑一行。

当用户输入值时,我想检查输入的值是否存在于某个范围之间。示例:1和100.此值范围因行中的不同列而异。如何编写此自定义验证?

这是我的代码。我想为采样间隔和延迟间隔编写自定义验证。

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]
                    });

1 个答案:

答案 0 :(得分:0)

您只需要为您的字段正确配置编辑器。您可以使用以下代码:

        {
            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';
                }
            }
        },

这里有完整的工作示例:http://jsfiddle.net/guyfawkes/q3TnT/