Loading multiple sets of data into one table / Creating Sub-fields in the data model

Question

I am trying to learn Ext JS as I have been set a project which requires me to know some basic parts of it, basically I am stuck on the following:

I need to load two JSON files into the same table based on a common field:

FILE 1

{
    "data" : [{
        "id" : "12",
        "data" : {
            "field1" : "data 1-1",
            "field2" : "data 1-2",
        }
    },{
        "id" : "34",
        "data" : {
            "field1" : "data 2-1",
            "field2" : "data 2-2",
        }
    }]
}

FILE 2:

{
    "otherdata" : [{
        "id" : "12",
        "stuff" : {
            "var1" : "stuff 1-1",
            "var2" : "stuff 1-2",
        },
        "morestuff" : {
            "v1" : "more 1-1",
            "v2" : "more 1-2",
            "v3" : "more 1-3"
        }
    },{
        "id" : "34",
        "stuff" : {
            "var1" : "stuff 2-1",
            "var2" : "stuff 2-2",
        },
        "morestuff" : {
            "v1" : "more 2-1",
            "v2" : "more 2-2",
            "v3" : "more 2-3"
        }
    }]
}

What I am trying to to is parse these into a table like so:

|-----------------------------------------------------------------------------------
|    |        data         |          stuff        |           morestuff           |
|-----------------------------------------------------------------------------------
| id |  field1  |  field2  |    var1   |    var2   |    v1    |    v2    |    v3   |
|-----------------------------------------------------------------------------------
| 12 | data 1-1 | data 1-2 | stuff 1-1 | stuff 1-2 | more 1-1 | more 1-2 |more 1-3 |
| 34 | data 2-1 | data 2-2 | stuff 2-1 | stuff 2-2 | more 2-1 | more 2-2 |more 2-3 |
------------------------------------------------------------------------------------

What I am stuck with is the following:

How do I load two JSON files and link them with a common field into a single data store?

How do I create fields and sub-fields inside the data model? (I can create single fields but can't figure out how to create fields within these fields)

My model currently looks like this:

Ext.define('NS.model.Group', {
    extend: 'Ext.data.Model',
    fields: ['id','field1', 'field2', 'var1', 'var2', 'v1', 'v2', 'v3']
});

Do you need to have some kind of in-grid editing? Like rowediting or cellediting? — sha, Apr 27 '12 at 01:39
No, it needs to refresh the data at regular intervals though, but that's not that difficult to code! — Andrew Willis, Apr 27 '12 at 07:42

score 2 · Accepted Answer · answered Apr 27 '12 at 12:12

2

For the grouping header look at the following sample: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/group-header-grid.html

This would let you create header similar to one you want (I think).

As far as combining two data stores into one store - while it's possible in your case I wouldn't recommend it (yet). You can just use custom renderer functions for the columns that belong to the other store. Something like this:

{ text: 'id', flex: 1, dataIndex: 'id' },
{ text: 'v1', flex: 1, dataIndex: 'id',  
  renderer: function(value) {   
    var st = Ext.getStore('Store2'),
        idx = st.findExact('id', value);
    if (idx >= 0)
      return st.getAt(idx).get('v1');
    else 
      return '-';
  }
},

answered Apr 27 '12 at 12:12

sha

17,824
5
63
98

Fantastic! thank you so much! Just starting to learn something like this from is very difficult due to the size of the documentation, simple functions get lost amongst other things! Once you know them, it becomes a lot simpler! – Andrew Willis Apr 27 '12 at 14:36
Yeap. And the task you're trying to do is quite interesting and you will fell much more comfortable with the framework after you finish it – sha Apr 27 '12 at 14:37
I think that was the point of the task! I've currently feel like I should be splitting the second file into two models to keep the data separate and then pulling it all together in the grid! – Andrew Willis Apr 27 '12 at 15:09

Loading multiple sets of data into one table / Creating Sub-fields in the data model

1 Answers1