CODEWITHSUNDEEP
extjsproxyextjs6
Alejandro Morán
Alejandro Morán

Reputation: 719

ExtJS 6 - Bind proxy data to form

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:

Expected result

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'
        },
   ...

Upvotes: 0

Views: 3476

Answers (1)

JChap
JChap

Reputation: 1441

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

Upvotes: 5

Related Questions