ExtJS 4 中的 RowEditor 数据验证

发布于 2024-12-29 18:01:55 字数 1693 浏览 5 评论 0原文

我设计了一个基于 MVC 模式的应用程序。因此，我还在模型中定义了代理、字段和验证器。例如，以下是国家/地区列表的模型：

模型

Ext.define('LT.model.Country',{

    extend: 'Ext.data.Model',
    fields: [{name: 'id',type: 'int'},
             {name: 'name', type: 'string'},
    ],

    validations: [
        {type: 'length', field: 'name', min: 2}
    ],

    proxy: {
        type: 'rest',
        url: '/country',
        reader: {
            type: 'json'
        },
        writer: {
            type: 'json'
        }    
   }
});

这是使用此模型的商店：

商店：

Ext.define('LT.store.Country', {
    extend: 'LT.base.store.Base',
    model:  'LT.model.Country'
});

商店显示在网格面板中，我使用RowEditor插件在网格视图中直接添加和编辑行

网格面板：

    Ext.define('LT.view.country.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.country-list',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2,
            clicksToMoveEditor: 1
        })
    ],
    store : 'Country',

    columns: [
            {header: 'ID',  dataIndex: 'id', width: 50},
            {header: 'Name', dataIndex: 'name', flex: 3, editor: 'textfield'},

    ],
    tbar: [{
        xtype: 'button',
        action: 'add',
        text: 'Add'
    },{
        xtype: 'button',
        action: 'delete',
        text: 'Delete'
    }]

});

我现在的问题是，如果您验证错误不会显示在网格视图中编辑数据。如果数据不符合验证标准，则不会将其提交给代理（这很好），但用户也不会收到错误消息，即插入的数据是无效的。

我发现了一些（不是很漂亮）的解决方法 - 但也许有人知道另一种解决方案来向 extjs 中的行编辑添加验证功能？

提前致谢&干杯，迈克尔

原文

I´ve designed an application based on the MVC Pattern. So I also defined my proxies, fields and validators in my model. Here for example is a model for a list of countries:

Model

Ext.define('LT.model.Country',{

    extend: 'Ext.data.Model',
    fields: [{name: 'id',type: 'int'},
             {name: 'name', type: 'string'},
    ],

    validations: [
        {type: 'length', field: 'name', min: 2}
    ],

    proxy: {
        type: 'rest',
        url: '/country',
        reader: {
            type: 'json'
        },
        writer: {
            type: 'json'
        }    
   }
});

And here is the store for using this model:

Store:

Ext.define('LT.store.Country', {
    extend: 'LT.base.store.Base',
    model:  'LT.model.Country'
});

The store is shown in a Grid Panel, where i use the RowEditor Plugin to enable adding and editing rows directly in grid view

Grid Panel:

    Ext.define('LT.view.country.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.country-list',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2,
            clicksToMoveEditor: 1
        })
    ],
    store : 'Country',

    columns: [
            {header: 'ID',  dataIndex: 'id', width: 50},
            {header: 'Name', dataIndex: 'name', flex: 3, editor: 'textfield'},

    ],
    tbar: [{
        xtype: 'button',
        action: 'add',
        text: 'Add'
    },{
        xtype: 'button',
        action: 'delete',
        text: 'Delete'
    }]

});

My problem now is, that the Validation Errors are not show if you edit data in grid view. If the data doesn´t match the validation criterias, then it´s not submitted to the proxy (which is fine), but the user also doesn´t get an error message, that the inserted data is invalid.

I found some (not really beautiful) workarounds - but maybe anyone knows another solution to add validation functionality to rowediting in extjs?

Thanks in advance & cheers,
Michael

分享到QQ

分享到微博