Question

我有一个加载了参数的数据视图。我在模板中渲染这些数据。我试图使用相同的数据，其中有一个嵌套项目呈现给网格。

数据如下所示：

{
    "myJson": {
        "name": "abc",
        "type": "faulty",
        "notes": [
            {
                "date": "01-01-1970",
                "note": "test note"
            },
            {
                "date": "01-02-1970",
                "note": "test note 2"
            }
        ]
    }
}

商店：

proxy: {
                type: 'ajax',
                url: '/api/detail/',
                reader: {
                    type: 'json',
                    root: 'myJson'
                }
            }

型号：

    {
        name:'name',
    },
    {
        name:'type',
    },
    {
        name:'notes',
        mapping:'notes'
    },

模板：

{name} - {type}

这一切都有效。我想要做的是使用notes块来显示在网格中。问题是我无法阅读笔记组。

var notesListView = new Ext.list.ListView({
    store: 'myStore',
    multiSelect: false,
    width:'100%',
    id:'notesList',
    columns: [{
        header: 'Date',
        width: 75,
        dataIndex: 'date'
    },{
        header: 'Note',
        width: 150,
        dataIndex: 'note',
    }]
});

甚至可以这样做吗？或者我是否需要创建一个新的商店和模型才能在网格中使用这组数据？

我已经尝试过映射到notes.date，例如，在模型

中

name:'note_date',
mapping:'notes.date'

并在网格本身

dataIndex:'notes.date'

两者都不起作用。

我也尝试使用renderer，但这不起作用，因为它是一个数组

renderer:function(value, metaData, record, rowIndex, colIndex, store){
    var value = value.date;//won't work; it needs an index a la value[0].date
    return value;
}

Answer 1

您可以使用您收到的相同数据创建嵌套模型。就像这样

Ext.define("JsonModel", {
  extend: 'Ext.data.Model',
  fields: ['name','type'],
  hasMany: [{
      model: 'Note',
      name: 'notes'
  }]
});

Ext.define("Note", {
  extend: 'Ext.data.Model',
  fields: [
      'date',
      'note']
});

通过这种方式，您可以访问任何给出记录的子项

var jsonRecordChildren = jsronRecord.notes()

我刚创建的变量jsonRecordChildren属于 Store 类型，因此您可以轻松地将其分配给网格的属性存储。

Ext.create('Ext.grid.Panel', {
  store: selectedRecord.notes(),
  columns: [
      { text: 'Date',  dataIndex: 'date' },
      { text: 'Note', dataIndex: 'note'}
  ],
  renderTo: Ext.getBody()
});

http://jsfiddle.net/alexrom7/rF8mt/2/

具有来自已加载商店的嵌套数据的网格行

1 个答案: