View Full Version : Populate complex JSON to a store and map it to a grid

15 Mar 2011, 3:11 AM

I have a little problem using a grid like in this example: http://dev.sencha.com/deploy/dev/examples/grid/grouping.html

I have data in this format:

[ {group1:{col1:val1,col2:val2}},
{group2:{col1:val1,col2:val2}} ]

group is the grouping and the cols are the grid-columns. How can I declare the fields and map it to the grid? I only saw examples with flat data. Do I have to flat my data?

Many thanks in advance! ;)

15 Mar 2011, 7:08 AM
Even the information if its possible at all would be helpful .... ;)

I only see examples with data in basic arrays :-?

15 Mar 2011, 7:17 AM
Would it be that difficult to re format your json?

15 Mar 2011, 7:44 AM
don't just come on here and expect other users to do the work for you. have you even TRIED doing this yourself? if so, show us what you have done.

we need to see your store, column model, grid definition and the full JSON (to identify the root).

15 Mar 2011, 9:13 AM
@rivarecords: Would not be difficult, but if there is a JsonStore I would expect that it can parse Json. :D

Here is a very simplified example (which doesnīt work):

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="js/ext-3.3.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-3.3.2/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="js/ext-3.3.2/ext-all-debug.js"></script>

<script type="text/javascript">

myClass = function (cfg) {

var myData = [

this.store = new Ext.data.ArrayStore({

storeId: 'EntryStore',
fields: [

this.store = new Ext.data.JsonStore({

storeId: 'EntryStore',
fields: [

this.gridPanelEntries = new Ext.grid.EditorGridPanel({

title: 'Entries',
store: this.store,
autoExpandColumn: 'col1',
frame: true,
autoHeight: true,
layout: 'fit',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
columns: [
xtype: 'gridcolumn',
header: 'Column 1',
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'col1'
xtype: 'gridcolumn',
header: 'Column 2',
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'col2'

Ext.apply (cfg, {

//title: 'Dummy',
//border: false,
autoShow: false,
frame: true,
items: [
}, {});

myClass.superclass.constructor.call (this, cfg);

Ext.extend (myClass, Ext.Panel, {});

// Draw the panel
new myClass({

renderTo: Ext.getBody(),
width: 400,
height: 350





15 Mar 2011, 9:39 AM
Hi dimebag, I'm a fan and your wha pedal is the bomb.

For your grouping grid view, you need a grouping store with a json reader. The json reader expects a root; your json has 3 roots. Take a look at the grouping store and the json reader in the API. In the grouping example, the reader is an array reader and I think thats whats throwing you off.

Oh, and your not using the grouping view in your grid; you'll need that.

15 Mar 2011, 10:14 AM
I like my whammy (digitech) most, or letīs say I did! ;)

I know about the example, I just thought I could do it without reformatting my Json!

Many thanks! ;)