代码之家 › 专栏 › 技术社区 › vick_4444

ExtJS/Javascript:将子模型添加到父模型,在网格上呈现

extjs4.2 store model json javascript

vick_4444 · 技术社区 · 6 年前

较短版本: 我有一个子模型,我需要将其添加到父模型,然后添加到存储区并在网格中进行渲染,现在渲染时,它只显示来自父模型的数据,而不显示子模型的数据。在我的控制器中,我认为问题出在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"}]
   }

]}

小提琴: https://fiddle.sencha.com/#view/editor&fiddle/2efb 应用程序代码位于资产/应用程序下/

加载小提琴时,第二个网格已经有2行了,这是MainStore2中的硬编码数据。

在顶部网格标题中,有一个按钮 '单击我' ,单击它将读取MainStore(grid1的存储)和group by Company中的记录,并将col4,5,6作为公司模型加载,将col1,2,3作为子模型Employee加载,并将Employee数组添加到公司模型中。因此,单击按钮,它将向下方的网格中再添加两条记录,在这里它将显示col4、5、6,但当您展开左侧的(+-图标)时,它不会显示子员工行,这与第1行和第2行不同。这就是我的问题所在。将子模型的数组添加到父模型。在clickMe事件结束后,第3行和第4行应与第1行相同(&2.

非常感谢您的帮助或指点。

详细版本: (仅当您需要更清楚地了解我的问题时才阅读)

小提琴: https://fiddle.sencha.com/#view/editor&小提琴/2efb 应用程序代码位于资产/应用程序下/

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

单击按钮(' 单击我' 在标题中),它将读取此网格存储,并按公司分组(col4),

所以用col4过滤,

1) 我创建了一个“公司”模型的实例,将col4、5、6填充到其中,这将分别是Dunder Miflin,一家造纸公司和办公室。

2) 循环遍历记录(只有2行),创建“Employee”模型的数组,并将col1、2、3添加到其中,然后将此雇员数组作为子对象添加到公司模型中。此阵列将具有,

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

{德怀特·施鲁特,他的电子邮件,他的电话号码}]

在第二个过滤器上,同上,但不同的公司(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();

非常感谢您的帮助或指点。

1 回复 | 直到 6 年前

vick_4444 6 年前

最后,通过试验n error了解了如何将子模型的数组添加到父模型中。

“公司”模式是我的父母。与子模型“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);

另一个变化是,我已将代理从商店移动到公司和员工模型。

更新的工作提琴: https://fiddle.sencha.com/#view/editor&fiddle/2efb