ExtJs4+；：计算模型字段是否可以编辑？

我的模型有两个数据字段：持久和计算：

Ext.define('My.model.Value', { extend: 'Ext.data.Model', idProperty: 'id', fields: [ { name: 'id', type: 'auto' }, { name: 'percentage', type: 'float' }, // values in 0..1 range { name: 'percentageDecimal', type: 'float', persist: false, calculate: function(v) { v = v.percentage; return Ext.isNumber(v) ? v * 100.0 : v; } } ] }); Ext.define（'My.model.Value'{ 扩展：“Ext.data.Model”， idProperty:“id”， 字段：[ {name:'id'，type:'auto'}， {name:'percentage'，type:'float'}，//0..1范围内的值 {name:'percentageDecimal'，键入：'float'，persist:false， 计算：函数（v）{ v=v.百分比； 返回分机号码（v）？v*100.0:v； } } ] });

percentageDecimal

字段用于网格，可编辑

问题：每次更新

percentageDecimal

时，如何将模型更改为自动更新

percentage

字段

---

我使用的是ExtJs 5.0.1。

我不知道他们是否在5.0.1中添加了一种自动方法来实现这一点，但您始终可以覆盖set方法，并且每当更新到

percentageDecimal

时，您都会重新计算

百分比

我更喜欢的另一种选择是：如果您希望有足够的更新，但您只想在网格中显示它，那么您可以从模型中删除额外的计算字段，并使用
dataIndex:'percentageDecimal'
设置您的列，并更改其
renderer
函数以显示它（作为十进制）

如下图所示：

... , { text: 'Percentage', dataIndex: 'percentageDecimal'
    , renderer: function (v) {
        return Ext.isNumber(v) ? v * 100.0 : v;
    }
  }

我不知道他们是否在5.0.1中添加了自动方法来实现这一点，但您始终可以覆盖set方法，并且每当更新
percentageDecimal
时，您都会重新计算
百分比

我更喜欢的另一种选择是：如果您希望有足够的更新，但您只想在网格中显示它，那么您可以从模型中删除额外的计算字段，并使用
dataIndex:'percentageDecimal'
设置您的列，并更改其
renderer
函数以显示它（作为十进制）

如下图所示：

... , { text: 'Percentage', dataIndex: 'percentageDecimal'
    , renderer: function (v) {
        return Ext.isNumber(v) ? v * 100.0 : v;
    }
  }

我使用@adaskos的建议如下：

Ext.define('My.model.Value', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
        { name: 'id', type: 'auto' },
        { name: 'percentage', type: 'float' }, // values in 0..1 range
        { name: 'percentageDecimal', type: 'float', persist: false,
            calculate: function(v) {
                v = v.percentage;
                return Ext.isNumber(v) ? v * 100.0 : v;
            }
        }
    ],
    set: function (fieldName, value, options) {
        if (Ext.isString(fieldName)) {
            // single field update
            if (fieldName === 'percentageDecimal') {
                this.set('percentage', Ext.isNumber(value) ? 0.01 * value : value);
                return;
            }
        } else {
            // multiple fields update
            if (Ext.isDefined(fieldName.percentageDecimal)) {
                var data = Ext.clone(fieldName);
                data.percentage = Ext.isNumber(data.percentageDecimal) 
                  ? 0.01 * data.percentageDecimal 
                  : data.percentageDecimal;
                delete data.percentageDecimal;
                this.set(data);
                return;
            }
        }
        this.callParent(arguments);
    }
});
Ext.define（'My.model.Value'{
扩展：“Ext.data.Model”，
idProperty:“id”，
字段：[
{name:'id'，type:'auto'}，
{name:'percentage'，type:'float'}，//0..1范围内的值
{name:'percentageDecimal'，键入：'float'，persist:false，
计算：函数（v）{
v=v.百分比；
返回分机号码（v）？v*100.0:v；
}
}
],
设置：函数（字段名、值、选项）{
if（Ext.isString（fieldName））{
//单字段更新
如果（fieldName=='percentageDecimal'）{
此.set（'percentage'，Ext.isNumber（值）？0.01*值：值）；
返回；
}
}否则{
//多字段更新
如果（Ext.isDefined（fieldName.percentageDecimal））{
var data=Ext.clone（字段名）；
data.percentage=Ext.isNumber（data.percentageDecimal）
？0.01*data.percentageDecimal
：data.percentageDecimal；
删除data.percentageDecimal；
本.集（数据）；
返回；
}
}
this.callParent（参数）；
}
}); 我使用@adaskos的建议如下：

Ext.define('My.model.Value', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
        { name: 'id', type: 'auto' },
        { name: 'percentage', type: 'float' }, // values in 0..1 range
        { name: 'percentageDecimal', type: 'float', persist: false,
            calculate: function(v) {
                v = v.percentage;
                return Ext.isNumber(v) ? v * 100.0 : v;
            }
        }
    ],
    set: function (fieldName, value, options) {
        if (Ext.isString(fieldName)) {
            // single field update
            if (fieldName === 'percentageDecimal') {
                this.set('percentage', Ext.isNumber(value) ? 0.01 * value : value);
                return;
            }
        } else {
            // multiple fields update
            if (Ext.isDefined(fieldName.percentageDecimal)) {
                var data = Ext.clone(fieldName);
                data.percentage = Ext.isNumber(data.percentageDecimal) 
                  ? 0.01 * data.percentageDecimal 
                  : data.percentageDecimal;
                delete data.percentageDecimal;
                this.set(data);
                return;
            }
        }
        this.callParent(arguments);
    }
});
Ext.define（'My.model.Value'{
扩展：“Ext.data.Model”，
idProperty:“id”，
字段：[
{name:'id'，type:'auto'}，
{name:'percentage'，type:'float'}，//0..1范围内的值
{name:'percentageDecimal'，键入：'float'，persist:false，
计算：函数（v）{
v=v.百分比；
返回分机号码（v）？v*100.0:v；
}
}
],
设置：函数（字段名、值、选项）{
if（Ext.isString（fieldName））{
//单字段更新
如果（fieldName=='percentageDecimal'）{
此.set（'percentage'，Ext.isNumber（值）？0.01*值：值）；
返回；
}
}否则{
//多字段更新
如果（Ext.isDefined（fieldName.percentageDecimal））{
var data=Ext.clone（字段名）；
data.percentage=Ext.isNumber（data.percentageDecimal）
？0.01*data.percentageDecimal
：data.percentageDecimal；
删除data.percentageDecimal；
本.集（数据）；
返回；
}
}
this.callParent（参数）；
}
}); 您应该使用配置选项
dependens
自动更新此选项！
并使用函数
convert
而不是
calculate
（不确定它是否与calculate一起工作，我需要测试）

请参见
您应该使用配置选项
使其自动更新！
并使用函数
convert
而不是
calculate
（不确定它是否与calculate一起工作，我需要测试）

请参见
您的解决方案很好，但我需要编辑网格中的百分比列，要编辑的值必须在0..100范围内。您的解决方案很好，但我需要编辑网格中的百分比列，要编辑的值必须在0..100范围内。我不知道“依赖”配置如何提供双向更新。这个配置只是告诉ExtJs每次更新“firstName”、“lastName”时都应该更新“name”字段。我不知道“depends”配置如何提供双向更新。这个配置只是告诉ExtJs，每次更新“firstName”、“lastName”时，“name”字段都应该更新。