Sencha Touch, setRecord() not working. Fields are blank. - sencha-touch

Question

I'm new to Sencha Touch...
I've been searching and asking people for hours, but cannot figure out why my detail view does not get the data (using setRecord).
I have not been able to find an example that uses Ext.NavigationView to push a view that uses the data from setRecord, so I suspect I'm doing something wrong there.
I have a tabbed view. First tab shows a list of items. Click an item disclosure to see details for that item. The detail view appears, but with no any data.
The tabs are setup in the launch function of ViewPortController.
The main view in the first tab is the PeopleListView. All the people appear in the list.
The PeopleListView is added to an Ext.NavigationView. A reference to the Ext.NavigationView is added to the PeopleListView so it can be used later
PeopleListViewController has a function, showDetailView, that is successfully called when a disclosure button is tapped.
The controller's showDetailView function
sets the record (which contains the correct data) on the personDetailView,
retrieves the instance of the Ext.NavigationView and pushes the PersonDetailView.
The record value passed to showDetailView has the correct data.
When personDetailView appears, the fields have no data.
ViewPortController:
launch: function() {
// var personDetailView = {
// xtype: 'persondetailview'
// }
var pplView = Ext.create('PeopleApp.view.PeopleListView');
var pplNavView = Ext.create('Ext.NavigationView', {
title: 'People',
iconCls: 'home',
useTitleForBackButtonText: true,
});
pplView.setNavigationView(pplNavView);
pplNavView.add(pplView);
. . .
var mainViewPort = getMainViewPort();
mainViewPort.setItems([pplNavView, . . .]);
},
PersonModel:
Ext.define('PeopleApp.model.PersonModel', {
extend: 'Ext.data.Model',
requires: ['Ext.data.proxy.Rest'],
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'gender', type: 'string' },
{ name: 'note', type: 'string' }
],
proxy: {
type: 'rest',
url: '/app/data/people.json',
reader: {
type: 'json',
rootProperty: 'people'
}
},
}
});
PeopleListViewController:
Ext.define('PeopleApp.controller.PeopleListViewController', {
extend: 'Ext.app.Controller',
xtype: 'peoplelistviewcontroller',
config: {
refs: {
peopleListView: 'peoplelistview',
personDetailView: 'persondetailview',
peopleView: 'peopleview',
},
control: {
peopleListView: {
discloseDetail: 'showDetailView'
}
}
},
showDetailView: function(view, record) {
console.log("record.data.name=" + record.data.name);
var detailView = Ext.create('PeopleApp.view.PersonDetailView');
//var detailView = this.getPersonDetailView();
detailView.setRecord(record);
var navView = view.getNavigationView();
navView.push(detailView);
},
launch: function() { this.callParent(arguments); },
init: function() { this.callParent(arguments); },
});
PersonDetailView:
Ext.define('PeopleApp.view.PersonDetailView', {
extend: 'PeopleApp.view.BaseView',
xtype: 'persondetailview',
requires: [
'Ext.form.FieldSet',
'Ext.form.Text',
'Ext.form.TextArea'
],
config: {
title: "Person Details",
scrollable: true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name: ',
required: true
}, {
xtype: 'textfield',
name: 'age',
label: 'Age: ',
required: false
}, // etc.
]}
]}
});
Can you tell me why detailView.setRecord(record) does not get the data set in the fields of DetailViewController, and what I need to do differently?

Answer 1

I am not sure but you should use below code in your Person detail view:
items: [
{
xtype:'formpanel',
id:'personDetailViewForm',
items:[{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name: ',
required: true
}, {
xtype: 'textfield',
name: 'age',
label: 'Age: ',
required: false
}, // etc.
]
}]
}]
and in the personListViewController you can set that form's values instead of setting records to the view like:
var detailView = Ext.create('PeopleApp.view.PersonDetailView');
var personDetailViewForm = detailView.down('#personDetailViewForm ');
personDetailViewForm .setValues(records);
Note that records object property names and form fields names must match and if records doesn't work try with records.data.