Extjs407 getValue()和getRawValue()区别介绍

"Extjs407 getValue()和getRawValue()区别介绍"的攻略如下:

概述

在ExtJS 4.0.7中，getValue()和getRawValue()都是从表单控件中获取值的方法。但是，它们之间还是有一些区别的。

getValue()

getValue() 方法返回表单控件的解析值，通常情况下是一个数字或字符串。

例如，使用getValue()方法获取ExtJS 4的ComboBox控件中的选中值:

var combo = Ext.create('Ext.form.field.ComboBox', {
    store: ['apple', 'banana', 'orange'],
    renderTo: Ext.getBody(),
    value: 'apple'
});

console.log(combo.getValue()); // 'apple'

getRawValue()

getRawValue() 方法返回表单控件的未解析的原始值，通常情况下是字符串。

例如，使用 getRawValue() 方法获取ExtJS 4的TextField控件中的文本:

var textField = Ext.create('Ext.form.field.Text', {
    value: 'Hello World',
    renderTo: Ext.getBody()
});

console.log(textField.getRawValue()); // 'Hello World'

区别介绍

getValue() 方法返回解析值，通常是一个数字或字符串。这个值是从表单控件中获取的，并且是已经经过验证和转换的。例如，对于一个日期字段，它会将日期字符串转化为一个Date对象。

相反，getRawValue() 方法返回表单控件的未解析的原始值，通常是一个字符串。 这个值是从表单控件中获取的，并且是未经验证或转换的。

因此，当你需要获取一个表单控件的原始值时，使用getRawValue() 方法，而当你需要获取解析后的值时，使用getValue() 方法。

示例1

以下示例展示了 ExtJS 4的 DateField 控件中的 getValue() 和 getRawValue() 两个方法的使用方式。

var dateField = Ext.create('Ext.form.field.Date', {
    renderTo: Ext.getBody(),
    value: '2020-07-01',
});

console.log(dateField.getValue()); // Fri Jul 01 2020 00:00:00 GMT+0800 (GMT+08:00)
console.log(dateField.getRawValue()); // 2020-07-01

getValue() 方法返回日期经过解析的Date对象，而getRawValue() 方法返回日期字符串 '2020-07-01'。

示例2

以下示例展示了 ExtJS 4的 NumberField 控件中的 getValue() 和 getRawValue() 两个方法的使用方式。

var numberField = Ext.create('Ext.form.field.Number', {
    renderTo: Ext.getBody(),
    value: '123',
});

console.log(numberField.getValue()); // 123
console.log(numberField.getRawValue()); // '123'

getValue() 方法返回数值 123，而getRawValue() 方法返回字符串 '123'。