Combobox store load after updating form with Model data

Question

I noticed that there are a lot of ways to populate a form with data. I want to do it the ExtJS4 MVC style. However I now see something unwanted happening.

My form has a combobox tied to a store. The store is filled after populating the form with the model data.

My view / form

Ext.define('WWT.view.settings.Form', {
  extend : 'Ext.form.Panel',
  alias : 'widget.settingsform',
  title : 'WWT Instellingen',
  bodyPadding : 5,
  defaultType : 'textfield',

  initComponent : function() {
    var me = this;
    me.dockedItems = me.buildToolbars();
    me.items = me.buildItems();
    me.callParent();
  },

  buildItems : function() {

      var lovEdities = Ext.create('WWT.store.lov.Edities');

      return [{
                fieldLabel : 'Huidige Editie',
                xtype : 'combo',
                emptyText : 'Kies een Editie',
                name : 'huidige_editie_id',
                store : lovEdities,
                queryMode : 'local',
                displayField : 'naam',
                valueField : 'id',
                forceSelection : true
            }, {fieldLabel : 'Scorebord Slogan',
                name : 'scorebord_slogan_regel',
                width: 200,
                maxLength : 10
            }, {
                fieldLabel : 'Tijd Offset Scorebord',
                name : 'scorebord_tijdoffset'
            }];
  },
  buildToolbars : function() {
    return [{
                xtype : 'toolbar',
                docked : 'top',
                items : [{ xtype:'button',
                            text : 'Save',
                            iconCls : 'save-icon',
                            action : 'save'
                        }]
            }];
  }
});

My Controller

Ext.define('WWT.controller.settings.Settings', {
    extend : 'Ext.app.Controller',
    models : ['secretariaat.Settings'],
    views : ['settings.Form'],
    init : function() {
        var me = this;
        me.control({
                    '#settingsId button[action=save]' : {
                        click : me.save
                    },
                    'settingsform' : {
                        afterrender : function(view) {

                            Ext.ModelMgr
                                    .getModel('WWT.model.secretariaat.Settings')
                                    .load(1, {
                                                success : function(record) {
                                                view.loadRecord(record);
                                                }

                                            });
                        }
                    }

                });
    },
    save : function() {
        var form = this.container.down('form');
        var model = this.getModel('settings.Settings').set(form.getForm()
                .getValues());
        model.save();
    },
    addContent : function() {
        this.container.add({
                    id : 'settingsIDQ',
                    xtype : 'settingsform',
                    itemId : 'settingsId'
                });
    }
});

In my Chrome Network window, I can see that the store request is fired later. Any thoughts on how to load the store before updating the form ? I thought of doing it in the afterRender too, but I think that even then the order is not guaranteed.

score 0 · Accepted Answer · answered May 21 '14 at 09:54

0

Seemed that there was nothing wrongs with the (load) mechanism. There was an issue in the data type of the ID field of the Combobox and the field which was part of the settings. Int vs String.

This caused the issue.

answered May 21 '14 at 09:54

E. Rood

13
5

score 0 · Answer 2 · answered May 12 '15 at 03:33

I get around the form loading issue in a few different ways.

If the store is used a lot throughout the application, I load the store early in the loading of the application by looking it up with Ext.getStore('my store name here') and then calling .load() during startup. If you want the store or stores to load only when you reach the form itself, I would hook the component's initialization in initComponent and then you can get the form's fields and with a for-loop can walk through the fields and initialize all stores with .load() before the form component accesses server data.

Here are my edits to your initComponent method. I haven't debugged this code, but it should work great for you.

initComponent() {
    var me = this;

    // this is where we will load all stores during init
    var fields = me.getForm().getFields();
    for (var i = 0; i < fields.length; i++) {
        var store = fields[i].getStore();
        if (store && !store.isLoaded()) {
            store.load();
        }
    }

    me.dockedItems = me.buildToolbars();
    me.items = me.buildItems();
    me.callParent();
},

Combobox store load after updating form with Model data

2 Answers2