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

【问题标题】：How to write custom validation for columns in row edit plugin in EXTJS如何为 EXTJS 中的行编辑插件中的列编写自定义验证
【发布时间】：2014-03-31 19:15:48
【问题描述】：

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

【问题讨论】：

标签： extjs

【解决方案1】：

您只需为您的字段正确配置编辑器。你可以使用这样的代码：

        {
            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/

【讨论】：

另一个问题。当我单击我的行进行编辑时，单元格的大小会缩小。单击编辑时如何保持单元格常量的宽度
你能显示截图吗？我在 Firefox 或 Chrome 中都看不到它。