在ext网格中显示其值与另一个表/模型中的字符串相对应的值

Question

我通过构建一个非常简单的'scrum'开发跟踪应用程序来教导自己ExtJS。我目前正在将“Backlog”显示为显示卡片属性（用户故事）的网格面板。

Card.js（卡型号）

Ext.define('AM.model.Card', { 
    extend: 'Ext.data.Model', 
    fields: [ 
       'id', 
       'name', 
       'priority_id', 
       ... 
      ] 
}); 

Priority.js（优先模式）

Ext.define('AM.model.Priority', { 
    extend: 'Ext.data.Model', 
    fields: [ 
       'id', 
       'name', 
       'short_name' 
      ] 
}); 

所以对于卡中的数据会是这个样子：

backlogcards。 json（data）

{ 
    success: true, 
    backlogcards: [ 
     { 
      id: 1, 
      name: 'ONEs', 
      priority_id: 2, 
      ... 
     }, 
     { 
      id: 2, 
      name: 'TWOs', 
      priority_id: 3, 
      ... 
     } 
    ] 
} 

而优先级是这样的：

priorities.json（数据）

{ 
    success: true, 
    priorities: [ 
     { 
      id    : 1, 
      name   : "High", 
      short_name  : "H" 
     }, 
     { 
      id    : 2, 
      name   : "Medium", 
      short_name  : "M" 
     }, 
      { 
      id    : 3, 
      name   : "Low", 
      short_name  : "L" 
     } 
    ] 
} 

所以我非常希望做的是有网格面板显示相应priority_id的SHORT_NAME。当点击该项目进行内联编辑时，将显示一个显示名称属性的组合框。我已经有一半了。

BacklogList.js（图）

Ext.define('AM.view.card.BacklogList', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.backlogcardlist', 

    title: 'Backlog', 
    store: 'BacklogCards', 

    selType: 'cellmodel', 
    plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ], 

    columns: [ 
     { header: 'ID', dataIndex: 'id' }, 
     { header: 'Name', dataIndex: 'name', field: 'textfield' }, 
     { 
      header: 'Priority', 
      dataIndex: 'priority_id', 
      width: 130, 
      field: { 
       xtype: 'combobox', 
       typeAhead: true, 
       store: 'Priorities', 
       displayField: 'name', 
       valueField: 'id', 
       listClass: 'x-combo-list-small' 
      } 
     } 
    ] 

}); 

所以我知道“dataIndex”属性是什么，我需要为了改变显示修改，但我不知道如何打这两个店一起。

正如你可以在上面看到，优先级被显示为数字，而不是SHORT_NAME。

这是我需要使用关联的情况吗？ （我只知道他们）Sencha Docs

谢谢！编辑1：哦，我意识到我可以'硬编码'做这种改变的渲染器属性，但我想避免这一点，而是使用优先级存储的值。

renderer: function(value){ 
     if (value==3) 
     { 
      return "L"; 
     } 
     else if (value==2) 
     { 
      return "M"; 
     } 
     else 
     { 
      return "H"; 
     } 
    }, 

EDIT2埃文： 优先店

Ext.define('AM.store.Priorities', { 
    extend: 'Ext.data.Store', 
    model: 'AM.model.Priority', 
    autoLoad: true, 

    proxy: { 
     type: 'ajax', 
     api: { 
      read: 'app/data/priorities.json', 
      update: 'app/data/updateUsers.json' 
     }, 
     reader: { 
      type: 'json', 
      root: 'priorities', 
      successProperty: 'success' 
     } 
    } 
}); 

的store.each指的是这家商店，对不对？如果是这样，我该如何执行它的每个操作？

我试图改变报关行：

var test = Ext.define('AM.store.Priorities', { 

然后试图改变你的代码test.each但没有成功。

再次感谢！

Answer 1

您需要使用的渲染器，但是并没有什么东西循环遍历优先级存储值和检查，像阻止你：

renderer: function(value) { 
    var display = ''; 
    store.each(function(rec){ 
     if (rec.get('id') === value) { 
      display = rec.get('name'); 
      return false; 
     } 
    }); 
    return display; 
}