覆盖ExtJS模型getter&;的最佳实践;二传手

覆盖ExtJS模型getter&;的最佳实践;二传手,extjs,Extjs,我想截取模型上的字段get/set,以便在值显示之前以及存储在模型中之前对其进行转换。在本例中,我希望在模型中存储uriencoded数据,但显示解码的值 当我直接重写get/set方法时,我看到代理正在使用它们将原始数据放入模型中。我不想覆盖这个过程,我甚至不知道如何判断是代理加载模型还是ui 最好的方法是什么?顺便说一句,转换似乎是一个糟糕的选择。它不是双向的、实时的。注意:我还没有测试过这段代码,所以如果您有问题,请使用这些概念并在稍后进行评论 为数据实体定义Ext.data.Model类

我想截取模型上的字段get/set,以便在值显示之前以及存储在模型中之前对其进行转换。在本例中,我希望在模型中存储uriencoded数据,但显示解码的值

当我直接重写get/set方法时,我看到代理正在使用它们将原始数据放入模型中。我不想覆盖这个过程,我甚至不知道如何判断是代理加载模型还是ui


最好的方法是什么?顺便说一句,转换似乎是一个糟糕的选择。它不是双向的、实时的。

注意:我还没有测试过这段代码,所以如果您有问题,请使用这些概念并在稍后进行评论

为数据实体定义Ext.data.Model类时(使用Ext JS 3的Ext.data.Record),请在Ext.data.Field属性实例中添加转换函数。如果需要,可以对所有字段执行此操作,但可能不建议这样做

我是这个框架的新手,所以有一件事我不知道如何做,那就是在转换函数中使用“this.self”符号,以防您在模型类中扩展另一个类。例如,如果您没有在Employee类中定义默认值,并且它从另一个类(例如Employee)继承,但是Employee构造函数设置了该属性,那么在编码数据时,它将采用在super类(基类或父类)构造函数中定义的值。现在,它只获取EmployeeDeveloper.dataValue属性

Ext.define('EmployeeDeveloper', {
  extend: 'Ext.data.Model',
  fields: [
    { name: 'name', type: 'string', defaultValue: 'Paul' },
    { name: 'profession', type: 'string', defaultValue: 'Ext JS developer' },
    { name: 'salary', type: 'float', defaultValue: '95000' },
    { name: 'dataValue', type: 'string',
      convert: function(value, record) {
        // feel free to use value and record parameters in this function
        return encodeData(record.get('dataValue'));  // you may have to use the "value" parameter instead of record.get('dataValue') if referencing the field in it's own convert function (haven't tested)
      }
    }
  ]
});

var empDev = Ext.create(
  'EmployeeDeveloper', 
  {
    name: 'MacGyver',
    dataValue: 'ABC'
  }, 
  'MacGyver', 
  123
);

var encodedDataValue = empDev.get('dataValue');
关于转换的注意事项:如果引用的字段定义在转换函数签名下面,代码将不知道该字段,并且无法检索该值

或者如果您有自定义类但未使用模型类…

今晚我还读到了一些ExtJS中的其他内容。他们在ExtJS4中添加了自动getter和setter。新版本的框架会自动在您的属性前面加上“get”、“set”、“reset”或“apply”,并在您定义的类的“config”属性中大写属性的第一个字母

在常规JavaScript中,它们没有真正的类,但Sencha使定义类(使用“define”函数)和实例化用户定义类的对象实例成为可能

例如,假设定义了以下类:

Ext.define('Paul.MyClass'), {
  extend: 'Ext.Window',
  config: {
    name: 'Paul'
  }
});
如果像这样创建对象的实例,则自动拥有四个函数的访问权限

var win = Ext.create('Paul.MyClass');  // create instance of MyClass object
var myName = win.getName();  // get name
win.setName('MacGyver');  // set name
win.resetName(); // this resets the value back to the default value ('Paul')
win.applyName();  // this calls custom code 
win.show();
我建议用您建议的逻辑覆盖apply*方法。然后打电话给win.get*();然后获取新值。明智的做法是为每个计划编码的字段添加一个额外的编码字段,这样就不必在每次访问(获取或设置)代理和/或存储中的数据时都操纵属性

Ext.define('Paul.MyClass'), {
  extend: 'Ext.Window',
  config: {
    name: 'Paul',
    dataValue: 'non encoded value of your data'
  }
  applyName: function(title) {
    this.name = this.name + ' ' + title;  // custom logic goes here
  }
  applyDataValue: function(encodeKey) {
    // get the encoded data value
    this.self.dataValue = 'encoded data value';  // custom logic goes here
  }
});

convert()
是一种双向方法。例如,我用它将来回的十进制色码转换为十六进制。我明白了。。(1) 在检索数据时,您是在ajax获取数据之前在服务器上对数据进行编码,然后在向最终用户显示数据之前对其进行解码?(2) 在URL中传递数据时,在使用数据时,先进行编码,然后在Ext JS中进行解码?(3) 保存数据时,您需要进行Ext JS编码,然后传递到服务器并在存储之前进行解码?转换是如何实现双向功能的?在我看来,它只有在某个对象从记录中读取值时才会被调用,即.myRec.get('field1')。在写操作过程中是否会调用一个等效的convert,即myRec.set('field1','newvalue')?我使用的是ExtJS 4.1和Sencha Touch 2.0,所以两者都有自动getter和setter。关于转换,仍然不确定它如何帮助写,它似乎只在转换读取时有用。也许我可以重写getter和setter,但在我看来,即使在加载ie.model.add(newRec)操作的过程中,getter和setter也会被调用,这对我没有好处。我还没有在Ext JS中编程。。本周末刚刚制作了一些小部件,并且一直在阅读一本关于这个主题的书。我刚刚得到一份工作(入门级),在那里我将为一家本地诊所开发一个具有此框架的数据仓库报告工具,因此我将快速学习。如果我在这本书中遇到一些信息或在网上阅读,我会回复你。您可能想在sencha.com论坛上发布一个问题,其中包含以下信息。model.add(newRec)没有做什么?我的问题是model.add(newRec)正在做什么。它正在调用属性getter和setter。我只希望在UI访问模型时调用我的getter和setter,而不是在代理加载模型时调用getter和setter。您可以尝试在getter和setter中调用showCallStack吗?对于您描述的场景,看看有什么不同或变量不同?此函数将向调用堆栈发出警报。然后,您可以返回跟踪,这样您就可以对getter/setter进行排序,以便在需要时在开始时返回(或被忽略),并且只返回字段/属性的当前值,而不是编码值。