Search code examples
javascriptjsonextjsrecordhierarchy

ExtJS 3.3 Tree data view from Json store

Beginner ExtJS user here.

I need to represent a Json data store in a tree data view in ExtJS 3.3. I have tried to find a solution for this but had no luck finding one for the type of data I have.

The data I am pulling is from a server and it comes in form of records from a table. After it is pulled, it is saved in Ext.data.JsonStore. An example of the query result would be:

householdId = 1; personId = 2
householdId = 1; personId = 3
householdId = 1; personId = 4

householdId = 2; personId = 5
householdId = 2; personId = 6

householdId = 3; personId = 7

And the store:

resultsStore =new Ext.data.JsonStore({
    id:'resultsStore',
    proxy: new Ext.data.HttpProxy(
              new Ext.data.Connection({
                          url: "searchHouseholds.action",
                          timeout: 300000 })),
    root : 'root',
    fields : [ 'householdId', 'personId']
});

Basically I want a nice view where a user can tell that personId 2 through 4 belong to householdId 1, householdId is the parent and personId is child. An example of what I'm thinking, no need for grandchildren though: http://dev.sencha.com/deploy/ext-3.3.1/examples/treegrid/treegrid.html

I've read that I need to transform the data into hierarchical state first. Also mentions about TreeStore, TreeLoader etc. The problem is a lot of these things I've seen in later versions in ExtJS and I'm not sure how to approach it in my older version.

Side note: first post on StackOverflow!

Thanks!

Solution

  • Do you require treegrid only? I think for treegrid, all the values needs to be in same column. But in your case the values are in two separate columns.

    If the values are in separate columns, but you want to represent grid by showing the relation between the two columns('householdId', 'personId' in your case), then have a look at "Grouping Grid".

    http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/grouping.html