ExtJS 数据模型

　　自定义数据模型

　　数据模型类其实就是一个继承自Ext.data.Model 的类。

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' }
    ]
});

　　fields 属性中定义了该模型的字段，它可以是对应到数据库中的字段。在使用的时候，数据模型包含的字段和类的属性使用方式不太相同。要访问字段的值，需要视同get 和 set 方法。

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone:'123456'
});
Tom.set('age', 20);
Ext.MessageBox.alert('提示', Tom.get('age'));

字段类型和转换器

　　

　　在定义数据模型的时候，我们可以定义字段的类型和该类型的转换器。例如，我们将为User类添加birthday字段，在初始化的时候，我们可能会传入一个字符串类型的日期格式，这个时侯就需要我们来定义一个类型转换器，将字符串格式的日期转换为Date类型。

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' },
        {
            name: 'birthday',
            type: 'date',
            convert: function (value, record) {
                if (Ext.isDate(value))
                    return value;
                else if (Ext.isString(value)) {
                    return Ext.Date.parse(value, "Y-m-d");
                }
            }
        }
    ]
});

　　在代码中添加了birthday字段，并为该字段设置了转换器，当传入的类型为string时，将会被转换为标准的时间类型。用法如下：

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone: '123456',
    birthday:'2000-01-15'
});
alert(Tom.get('birthday'));

　　

数据验证

　　我们可以使用数据模型来验证数据是否正确。在上面的例子中，我们希望phone 字段的长度在8和15之间，那么，我们需要这样修改代码：

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' },
        {
            name: 'birthday',
            type: 'date',
            convert: function (value, record) {
                if (Ext.isDate(value))
                    return value;
                else if (Ext.isString(value)) {
                    return Ext.Date.parse(value, "Y-m-d");
                }
            }
        }
    ],
    validations: [
        { field: 'phone', type: 'length', min: 8, max: 15 }
    ]
});

　　为phone 字段添加验证，验证类型为length，最小为8，最大为15，验证的代码如下：

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone: '123456',
    birthday:'2000-01-15'
});
var errors = Tom.validate();
var errorMsg = [];
if (!errors.isValid()) {
    errors.each(function (error) {
        errorMsg.push(error.field + "   " + error.message);
    });
    Ext.Msg.alert("错误", errorMsg.join('<br />'));
}

　　

我们将phone的长度设置为6位，很明显是不能通过验证的。程序运行起来以后，我们会得到下面的错误：

自定义验证规则

ExtJS 中虽然内置了一些验证规则，但这些规则面对庞大的业务需求肯定是不够的，所以ExtJS 还允许我们自定义验证规则。

Ext.apply(Ext.data.validations, {
    ageMessage: '必须在0到150之间',
    age: function (config, value) {
        if (value === undefined || value === null) {
            return false;
        }

        if (value < 0 || value > 150) {
            return false;
        }

        return true;
    }
});

　　Ext.apply 方法用来将第二个参数中的属性和方法复制到第一个参数中，在这里的作用是将我们定义的age规则添加到Ext 的验证规则中。

 

转载于:https://www.cnblogs.com/ImaY/p/4602384.html