Grid rows with nested data from loaded store

Question

I have a dataview that gets loaded with a parameter. I render this data in a template. I am trying to use the same data in which there is a nested item to render to a grid.

The data looks like this:

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

The store:

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

Model:

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

Template:

{name} - {type}

That all works. What I'd like to do is use the notes chunk to display in a grid. Problem is I can't get it to read the notes group.

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',
    }]
});

Is it even possible to do this? Or do I need to create a new store and model to use this group of data in a grid?

I've tried mapping to notes.date, for instance, in both the model

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

and in the grid itself

dataIndex:'notes.date'

neither of which worked.

I've also tried using renderer but this doesn't work either as it's an array

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;
}

Because neither are correct. You can't refer to `notes.date` because `notes` is an array. — Evan Trimboli, Apr 05 '13 at 21:28

score 1 · Accepted Answer · answered Apr 07 '13 at 02:31

1

You could create a nested model with the same data you are receiving. It would be like this

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']
});

This way you could access the children of any give record like this

var jsonRecordChildren = jsronRecord.notes()

The variable jsonRecordChildren that I just created is of the type Store, so you could easily assign it to the attribute store of a grid.

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/

answered Apr 07 '13 at 02:31

alexrom7

864
7
12

Thank you for the reply. And for the fiddle. Wish it didn't involve hasMany as I never can seem to get those to work... Works in the fiddle, but in the app with ajax proxy, the app can't find notes() no matter what I try :/ – stormdrain Apr 08 '13 at 14:40
This might help you. http://stackoverflow.com/questions/8134420/loading-hasmany-data-in-extjs – alexrom7 Apr 08 '13 at 15:46
Heh thanks :) I did my diligence; wondered through many a SO posts before complaining I couldn't get it. Don't know if it's because the model and stores are in nested folders or what. Tried all the suggestions I could find (even tried moving proxy into model). Console logs a constructor (with missing notesStore) when I log selectedRecord whereas in the fiddle it logs an object with store intact. – stormdrain Apr 08 '13 at 15:52
Does the chrome console give you an error? Does the **name** attribute of the **hasMany** matches with **notes** node of your json? Are your models getting loaded?. Could you break the jsfiddle I made so it looks more like the code you have ?, I don't think the ajax proxy is the problem, but there is a way to simulate it in jsfiddle. – alexrom7 Apr 08 '13 at 21:19
The error was something along the lines of `Object [object Object] has no method 'notes'`. As I said, the models and stores are nested in folders and were being called akin to 'MyApp.model.People.Notes'. The hasMany name did match the notes node but it wouldn't find notes(). The other big difference is the stores are loaded with a param via onChange on another element. I was trying to call this grid code on the success callback of the store load, and it fired, but getAt(0) always seemed to return a constructor sans notes(). I ended up doing something else but really appreciate the help :) – stormdrain Apr 09 '13 at 13:17

Grid rows with nested data from loaded store

1 Answers1