ExtJS 6 - Bind proxy data to form

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

Generally Store is used for Multiple Records, If you want to just display only record in display form. Why can't you define the proxy at model level and use Model.load to load the single record. — JChap
– JChap, Commented Mar 29, 2016 at 14:57
That's totally true! Thank you, do you have a simple example? — jiop
– jiop, Commented Mar 29, 2016 at 15:06

JChap · Accepted Answer · 2016-03-29 23:11:16Z

5

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

edited Mar 29, 2016 at 23:11

answered Mar 29, 2016 at 16:06

JChap

1,4419 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jiop Over a year ago

Super awesome, that's what I was exactly looking for! Thanks.

jiop Over a year ago

What should I do in the case that I need this behavior but now the json returned contains 2 array fields to populate 2 different grids?

Collectives™ on Stack Overflow

ExtJS 6 - Bind proxy data to form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related