PDA

View Full Version : GridPanel with Json



GoneIn20Seconds
18 May 2009, 2:24 PM
I've been trying to load a grid with data retrieved with an ajax call.

I am able to make the ajax call, but the grid will not populate and I don' know what I'm doing wrong.

My code is below, any help would be much appreciated. Thank you.

In case it helps, the returned AJAX looks like this:



{
users: [
{
username: 'bsmith',
firstname: 'Bob',
lastname: 'Smith',
email: '[email protected]'
}
]
}

new Ext.Window({
id: 'allAccountsWindow',
width: 500,
height: 250,
minWidth: 280,
minHeight: 250,
resizable: true,
closable: true,
minimizable: false,
maximizable: true,
plain: true,
modal: false,
layout: 'fit',
title: "Accounts",
border: false,
listeners: { close: function() { win = null } },
items: [
new Ext.grid.EditorGridPanel({
store: new Ext.data.JsonStore(
{
// load using HTTP
url: 'ajax_php/all_accounts.php?command=loadAllAccounts',
autoLoad: true,
fields: [
{name: 'username', type: 'string'},
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'},
{name: 'email', type: 'string'}
],
sortInfo:{field:'username', direction:'ASC'}
}
),
cm: new Ext.grid.ColumnModel(
[
{
id: "all_accounts__username",
header: "Username",
dataIndex: "username",
width: 100,
editor: new Ext.form.TextField(
{
allowBlank: false
}
)
},{
id: "all_accounts__firstname",
header: "First Name",
dataIndex: "firstname",
width: 100,
editor: new Ext.form.TextField(
{
allowBlank: false
}
)
},{
id: "all_accounts__lastname",
header: "First Name",
dataIndex: "lastname",
width: 100,
editor: new Ext.form.TextField(
{
allowBlank: false
}
)
},{
id: "all_accounts__email",
header: "Email",
dataIndex: "email",
width: 100,
editor: new Ext.form.TextField(
{
allowBlank: false
}
)
}
]
),
width: 600,
height: 300,
//autoExpandColumn: 'username',
title: 'User Accounts',
frame: true,
plugins: activeColumn,
clicksToEdit:1
})
]
});

mjlecomte
18 May 2009, 7:16 PM
FYI There's a FAQ dedicated to Grids, see signature.

Add load and loadexception listeners to your store, very helpful when debugging grids to isolate problem.

Have you read up on what a reader is? A JsonStore implicitly creates one for you, but you're still resposible to configure some important aspects of it (for example, what the root is).

If you are putting a component inside a container with a fit layout, you don't need to explicitly specify the size of that component, the layout manager will do that for you. In your case, you have put a grid panel inside a window with a fit layout manager. So you do not need to specify the width/height of the grid in the grid's configuration.

mjlecomte
18 May 2009, 7:18 PM
P.S. Welcome to ExtJS, and technically you're did not return "AJAX" to the client, you returned "JSON". You can read about what JSON is at www.json.org

mjlecomte
18 May 2009, 7:20 PM
I could nit pick a few more things, but one last one I notice that may give you problems is that you probably want your autoExpandColumn to be:

autoExpandColumn :"all_accounts__username", // (should match the id you assigned one of your column configurations within the column model)

GoneIn20Seconds
19 May 2009, 6:34 AM
Thank you for your help. I was able to isolate the problem in that the "root" was not defined for the JsonStore. Your responses helped me to pick up on a line in the API documentation for the JsonStore I had not noticed before:


Note: Although they are not listed, this class inherits all of the config options of Store, JsonReader.Thank you too for the welcome, the clarification on Json, and for your speedy response.

Below is the section of corrected code. I hope it helps someone in the future:



store: new Ext.data.JsonStore(
{
// load using HTTP
url: 'ajax_php/all_accounts.php?command=loadAllAccounts',
autoLoad: true,
fields: [
{name: 'username', type: 'string'},
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'},
{name: 'email', type: 'string'}
],
sortInfo:{field:'username', direction:'ASC'},
listeners: [
{ "load": Ext.Msg.alert("loaded") },
{ "loadexception": Ext.Msg.alert("load exception") }
],
root: "users"
}
)

mjlecomte
19 May 2009, 6:53 AM
Not sure if you are looking at the latest docs:
http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.data.JsonStore

Someone added to the example snippet and notes (*), specifically about root.

GoneIn20Seconds
19 May 2009, 7:20 AM
Thank you. I was using 2.2.1 docs.