PDA

View Full Version : Having a Grid inside a Form and load data from one JSON data source!



behrooz_a
5 Jan 2011, 8:20 AM
Hi,

I would like to show a form that displays the below JSON data.



{
"text":"Calendar",
"description":"calendar app",
"authorization":[
{"role":"ADMIN","duty":"ON"},
{"role":"CLEANER","duty":"ON/OFF"},
{"role":"DRIVER","duty":"OFF"}
]
}Writing the below code without bold parts shows the the "text" and "description" in a FormPanel and works fine.



var functionForm = new Ext.form.FormPanel({
frame : true,
reader : new Ext.data.JsonReader({
fields : [
{ name : 'text' },
{ name : 'description' },
{ name : 'role', mapping:'authorization.role' }
]
}),
items : [
{
layout :'column',
items: [
{
xtype : 'displayfield',
name : 'text'
}
]
},
{
layout :'column',
items: [
{
xtype : 'displayfield',
name : 'description'
}
]
},
{
columnWidth:.50,
layout: 'form',
items: [
new Ext.grid.GridPanel({
title : 'Authorization',
columnLines : true,
height : 300,
columns : [
{
xtype : 'gridcolumn',
header : 'Role',
dataIndex : 'role',
sortable : true
}
]
})
]
},
]
});

I tried to add a grid to my form and show the "authorization" roles in the first column by adding the bold parts. But it does not work and firebug shows the below error:


this.ds is undefined

Any idea why this is happening? Basically, is it possible to have a grid element inside a form that directly refers to the form data source?

Note: I used a JsonReader instead of using a store since the url to load data was dynamic based on the user interaction.

Condor
5 Jan 2011, 8:45 AM
No, that won't work.

Your formpanel needs 'text', 'description' and 'authorization' fields.

The gridpanel needs a store with a reader that can process an array of roles.

Since a gridpanel is not a field, it's not loaded automatically. You will need to add an actioncomplete event handler to the form that calls:

grid.getStore().loadData(action.result.data.authorization);

behrooz_a
6 Jan 2011, 3:26 AM
Thank you so much for your prompt response!