View Full Version : Loading JSON data into a form in ExtJS 4.x

1 May 2014, 7:14 AM
I'm new to ExtJS and I'm trying to build a "user management" application. My view looks similar to this:

As you can see, I have a combobox at the top of my view which contains a list of usernames. This combobox is populated from a store (which uses a very simple model). The store uses an ajax proxy to retrieve a list of all the existing usernames from the server. When my user chooses a username from the combobox, I want to retrieve the user account information for the selected username from my server and display that info in the "Account information" form which appears directly below my combobox.
Here are the model and store for my combobox:

Ext.define('UserMgmt.model.Username', { extend: 'Ext.data.Model', requires: [ 'Ext.data.Field' ], fields: [ { name: 'id' }, { name: 'name' } ]});

Ext.define('UserMgmt.store.Usernames', { extend: 'Ext.data.Store', requires: [ 'UserMgmt.model.Username', 'Ext.data.proxy.Ajax', 'Ext.data.reader.Json', 'Ext.util.Sorter' ], constructor: function(cfg) { var me = this; cfg = cfg || {}; me.callParent([Ext.apply({ autoLoad: true, model: 'UserMgmt.model.Username', storeId: 'Usernames', proxy: { type: 'ajax', url: '/api/users', reader: { type: 'json' } }, sortOnLoad: true, sorters: { property: 'name', direction: 'ASC' } }, cfg)]); }});

As you can see, my combobox store retrieves the full list of usernames (via its ajax proxy) from the URL /api/users. When my user selects a username from the combobox, I need to retrieve the account information for the selected user and populate my form fields with it. If, for example, my user were to choose a username of "jsmith" in the combobox, then the URL to retrieve the account info for "jsmith" would be /api/users/jsmith.

Can anyone tell me how I would go about making an ajax call to retrieve user account information for a specific user and then display that information in my form fields? Should I create a model and store for the account information and use that with my form? If so, how would I go about dynamically setting/updating the URL to retrieve the individual user account information from?
Also, the JSON for a specific user account comes back from the server looking like this:

{ "userId" : 12345, "email" : "jsmith@gmail.com", "type" : "user", "permissions" : [], "unnecessaryField1" : "some_string_value", "unnecessaryField2" : "some_string_value", "accountLocked" : false, "name" : "jsmith", "lastLogin" : "4/29/2014 11:32:19 AM"}

As you can see, there are some fields in the JSON that are "unnecessary" for my purposes (but are useful for other consumers of the API). Will that cause any issues in displaying the data in the form or saving the data back to the server?

2 May 2014, 1:34 PM
You can use:

form.loadRecord( recordObjectFromServerResponse );