PDA

View Full Version : Forms, binding, ajax



Joshua Pruitt
10 Feb 2015, 7:41 AM
Ok, guys, sorry to do this, but I am stumped. I'm sure you're rolling your eyes right now!

I have a form (View), a ViewModel, a Store, and a Model. The Store queries an Ajax (CORS) source. I'm trying to tie it all together.

My problem - my browser registers an Ajax request, but I'm having problems populating the form! If I fenagle things, sometimes I can get the form populated if I navigate off and back to the view. But mostly not. Here's what I've got:



/app
|- model/User.js
|- store/User.js
|- view/
|- user/
|- User.js
|- UserController.js
|- UserModel.js


Here's my code (relevant details):



// ./view/user/User.js
Ext.define('MyApp.view.user.User', {
extend: 'Ext.form.Panel',
requires: [ 'MyApp.view.user.UserModel' ],
id: 'user-view',
xtype: 'user-view',
reference: 'user_view',
title: 'User Details',
frame: true,
controller: 'user',
viewModel: { type: 'user' },
defaults: { xtype: 'textfield', padding: 10, width: 500, readOnly: true },
items: [
{ bind: '{full_name}', fieldLabel: 'Name' },
{ bind: '{username}', fieldLabel: 'Username' },
{ bind: '{title}', fieldLabel: 'Title' }
]
});




// ./view/user/UserModel.js
Ext.define('MyApp.view.user.UserModel', {
extend: 'Ext.app.ViewModel',
requires: [ 'MyApp.store.User', 'MyApp.model.User' ],
alias: 'viewmodel.user',
stores: { users: { type: 'user' } }
});




// ./store/User.js
Ext.define('MyApp.store.User', {
extend: 'Ext.data.Store',
requires: [ 'MyApp.model.User' ],
model: 'MyApp.model.User',
storeId: 'user',
alias: 'store.user',
listeners: {
load: function(self, records, successful) {
console.log(records); // record loads
}
},
autoLoad: true
});




// ./model/User.js
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
alias: 'model.user',
fields: [
{ name: 'username', type: 'string' },
{ name: 'full_name', type: 'string' },
{ name: 'title', type: 'string' }
],
proxy: {
type: 'ajax',
method: 'get',
url: 'http://127.0.0.1:5000/api/v1/users/test123', // hardcoded this for now
reader: { type: 'json', rootProperty: 'users' }
}
});


JSON response looks like this (just fine):



{
"count": 1,
"success": true,
"users": [
{
full_name: "Joe User",
username: "test123",
title: "Baller",
....
}
]
}


Not sure if it's relevant, but I'm expecting my json to return a users[] array with a single record. My understanding is Extjs forms will load the first record in an array by default.

Anyway, I appreciate any insight y'all might have! I wouldn't ask if I weren't flummoxed.

Thanks!

joel.watson
12 Feb 2015, 10:55 AM
Hi Joshua--

Instead of trying to bind the store to the form, I would try adding a "link" to the model itself:
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.app.ViewModel-cfg-links

I've put together a Fiddle (below) demonstrating this with your code.

I hope that helps--thanks!
Joel

i6c

Joshua Pruitt
12 Feb 2015, 12:34 PM
That's awesome! Thank you!

I still need to figure out why this is best practice in this particular case, but for the moment I'm satisfied that it works.

joel.watson
12 Feb 2015, 1:05 PM
That's awesome! Thank you!

I still need to figure out why this is best practice in this particular case, but for the moment I'm satisfied that it works.

Using a store, the binding (store.somefield) doesn't know to retrieve the values out of a particular record within a store. With links, the nature of a model instance is understood and is able to be bound properly.

Thanks!
Joel