ExtJS/Javascript：将 child 模型添加到 parent 模型，在网格上渲染

Question

缩略版： 我有一个 child 模型，我需要将其添加到 parent 模型，然后添加到商店并在网格中渲染它，现在当我渲染它时，它只显示来自 parent 模型而不是 child 模型。在我的控制器中，我认为问题出在第 51 行附近：我不知道是否有任何其他方法可以做到这一点，

company.set('employees',employees);

如果我对模型的数据进行硬编码，child ('Company' hasMany -> 'Employee') 它在网格中呈现良好。我试图模仿的模型数据如下

data:{'items':[
   { 'col4': 'Dunder Miflin',  "col5":"A paper company",  "col6":"The Office", 
    "count" : 2,
    "employees": [{'col1': 'Michael Scott',  "col2":"michael@dundermiflin.com",  "col3":"555-111-1224" },
                  {'col1': 'Dwight Schrute',  "col2":"dwight@dundermiflin.com",  "col3":"555-222-1234"} ]
   },
   { 'col4': 'Athlead',  "col5":"Sports marketing company",  "col6":"The Office", 
     "count": 1,
         "employees": [{'col1': 'Jim Halpert',  "col2":"jim@athlead.com",  "col3":"555-222-4444"}]
   }

]}

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2efb 申请代码在 Assets/app/

加载fiddle时，第二个网格已经有2行，这是MainStore2中的硬编码数据。

在顶部网格header中，有一个按钮'clickMe'，点击它会从MainStore（grid1的商店）中读取记录并且按 Company 分组并将 col4,5,6 加载为 Company 模型，将 col1,2,3 加载为 child 模型 Employee 并将 Employees 数组添加到 Company 模型。因此，单击按钮后，它会在下方网格中再添加两条记录，此处会显示 col4、5、6，但是当您展开（左侧的 + - 图标）时，它不会显示 child 员工行，这与行不同1和2。这就是我的问题所在。将 child 模型数组添加到 parent 模型。最后，在 clickMe 事件之后，第 3 行和第 4 行应与第 1 行和第 2 行相同。

非常感谢任何帮助或指点。

详细版本：（如果您需要更清楚地了解我的问题，请阅读它）

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2efb 申请代码在 Assets/app/

我在上面的网格中有 3 行，它有两个公司，Dunder Miflin 和 Athlead。 {col4}

On button Click ('clickMe' in the header) 它会读取这个网格存储，并按公司分组 (col4),

所以按 col4 过滤，

1) 我创建了一个 'Company' 模型的实例，将 col4,5,6 填充到它，这将分别是 Dunder Miflin、A Paper Company 和 The office。

2) 遍历记录（只有 2 行），创建 'Employee' 模型数组并向其添加 col1,2,3 并将此员工数组添加到 Company 模型中作为其 child。这个数组将有，

[{迈克尔·斯科特，他的电子邮件，他的电话号码},

{Dwight Schrute，他的电子邮件，他的电话号码}]

在第二个过滤器上，与上面相同，但公司 (Athlead) 和一名员工 (Jim) 不同。

现在将这两个公司添加到一个数组中，并将这个公司数组添加到属于较低网格的商店中。问题是它显示的是公司而不是员工。最后，在 clickMe 事件之后，第 3 行和第 4 行应与第 1 行和第 2 行相同。

上述算法的伪代码：

var companies = [];

Loop begin:
   var  company=Ext.create('TestUI.model.Company', record.data);
  var employees = [];
   var counter=0;

  //store1 filterByCol4.
  store1.each(function(record){
     var employeesModel = Ext.create('TestUI.model.Employee', record.data);
     employees.push(employeesModel.data);
 });
  company.set('employees',employees);
  companies.push(company);
loop END;

store2.add(companies);
store2.sync();

非常感谢任何帮助或指点。

Answer 1

最后通过试错 n 次错误想出了如何将 child 模型数组添加到 parent 模型。

'Company' 模特是我的parent。与 child 模型有很多关系 'Employee'

Ext.define('TestUI.model.Company', {
    extend    : 'Ext.data.Model',
    fields  : [
        {name: 'col4',        type: 'string'},
        {name: 'col5',        type: 'string'},
        {name: 'col6',        type: 'string'},
        {name: 'count',        type: 'int'}
    ]
    ,hasMany: [
         {model: 'TestUI.model.Employee',   name: 'employees'}
     ],
     proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.define('TestUI.model.Employee', {
    extend    : 'Ext.data.Model',
    fields  : [
        {name: 'col1',        type: 'string'},
        {name: 'col2',          type: 'string'},
        {name: 'col3',        type: 'string'}
    ],

     proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'employees'
        }
    }
});

魔法线是：

company.employees().add(employees);

伪代码：

Loop through records and create employee model and add to employee array: {
   var employeesModel = Ext.create('TestUI.model.Employee', record.data);
   employees.push(employeesModel);
}
end Loop
//create Company model and add array employees to Company.
   var company=Ext.create('TestUI.model.Company', record.data);
   company.employees().add(employees);

其他变化是我已将代理从商店移动到公司和员工模型。

更新工作 Fiddle：https://fiddle.sencha.com/#view/editor&fiddle/2efb

ExtJS/Javascript：将 child 模型添加到 parent 模型，在网格上渲染

ExtJS/Javascript: adding a child Model to a parent Model, rendering this on a grid

javascript

json

model

store

extjs4.2