ExtJS 6 - Bind proxy data to form - extjs

Question

I have a proxy store that retrieves information from a webservice, I would like to show that information in a Panel in a way like a Grid, in which I set the "dataIndex" parameter to bind in the retrieved data.
How can I achieve this goal without extra coding, is that possible?
Something like this:
Proxy Store:
Ext.define('MyStore', {
extend: 'Ext.data.Store',
alias: 'store.myStore',
model: 'myModel',
autoload: true,
proxy: {
type: <wsType>,
url: <wsUrl>
},
scope: this
});
Panel:
Ext.define('<myPanel>', {
extend: 'Ext.panel.Panel',
...
store: Ext.create(<myStore>),
...
items: [
{
xtype: 'titlePanel',
cls: 'titlePanel',
html: '<div class="titlePanel"><h1>My Title</h1></div>',
},
{
xtype: 'form',
layout: 'vbox',
cls: 'whitePanel',
items: [
{
xtype: 'panel',
layout: 'column',
items: [
{
xtype: 'displayfield',
displayField: 'name',
dataIndex: 'name',
fieldLabel: Ext.locale.start,
name: 'start'
},
...

Answer 1

You don't need Store for displaying a single Record. Proxy can be defined at a model level.
Ext.define('MyApp.model.Contact', {
extend: 'Ext.data.Model',
fields: ['id', 'firstName', 'middleName', 'lastName'],
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Load the model either in view constructor/initComponent or controller init method, once loaded push the record to ViewModel.
initComponent: function() {
this.callParent(arguments);
var me = this;
MyApp.model.Contact.load(1, {
success: function(record, operation) {
me.getViewModel().set('contact', record);
}
})
},
Bind the model property to the display field
items: [{
name: 'firstName',
fieldLabel: 'First Name',
bind: '{contact.firstName}',
xtype: 'displayfield'
}]
And here is the fiddle
https://fiddle.sencha.com/#fiddle/17t2