从 ExtJS 4 中的自定义模型类扩展答案

【问题标题】：Extend from custom model class in ExtJS 4从 ExtJS 4 中的自定义模型类扩展
【发布时间】：2023-03-11 20:17:01
【问题描述】：

如何在 extjs 中扩展自定义模型。

当我将在下面的示例中引用 BusinessUser 类中的字段时，是否有任何方法可以直接组合 User 和 BusinessUser 字段的字段。

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

Ext.define('BusinessUser', {
    extend: 'User',
    fields: [
        {name: 'businessType',  type: 'string'},
        {name: 'company', type: 'string'}
    ],
});

【问题讨论】：

标签： javascript extjs extjs4 extjs4.1

【解决方案1】：

您无需手动加入字段，因为它是自动完成的。根据您的问题检查以下代码中的输出：

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

Ext.define('BusinessUser', {
    extend: 'User',
    fields: [
        {name: 'businessType',  type: 'string'},
        {name: 'company', type: 'string'}
    ],
});

// instantiating a User object
var u = Ext.create('BusinessUser', {
    name: 'John Doe', 
    age: 30, 
    phone: '555-5555'
});

// instantiating a BusinessUser object
var bu = Ext.create('BusinessUser', {
    name: 'Jane Doe', 
    age: 40, 
    phone: '555-5556', 
    businessType: 'analyst', 
    company: 'ACME'
});

console.log(Ext.getClassName(bu)); // "BusinessUser"
console.log(Ext.getClassName(u));  // "User"
console.log(u  instanceof User); // true
console.log(bu instanceof User); // true
console.log(u  instanceof BusinessUser); // false
console.log(bu instanceof BusinessUser); // true
console.log(u  instanceof Ext.data.Model); // true
console.log(bu instanceof Ext.data.Model); // true
console.log(u  instanceof Ext.data.Store); // false, just to check if it's not returning true for anything
console.log(bu instanceof Ext.data.Store); // false
console.log("name"    in u.data);  // true
console.log("name"    in bu.data); // true
console.log("company" in u.data);  // false
console.log("company" in bu.data); // true

【讨论】：

看起来像是打错字了，但是...console.log(Ext.getClassName(bu)); // "BusinessUser" console.log(Ext.getClassName(u)); // "User" 将打印BusinessUser 两次，instanceof 的测试将提供相应的输出

【解决方案2】：

虽然它应该会自动运行，但如果您由于某种原因遇到问题，请使用以下方法。

使用构造函数加入字段：

Ext.define('BusinessUser', {
   extend : 'User',
   constructor : function(){
      this.callParent(arguments);
      this.fields.push([
        {name: 'businessType',  type: 'string'},
        {name: 'company', type: 'string'}
    ]);
   }
});

【讨论】：

虽然这应该有效，但下面的答案是正确的。请参考它，因为它会自动为您执行此操作。