使用模型数据更新表单后组合框存储加载答案

【问题标题】：Combobox store load after updating form with Model data使用模型数据更新表单后组合框存储加载
【发布时间】：2015-05-12 11:33:24
【问题描述】：

我注意到有很多方法可以用数据填充表单。我想做 ExtJS4 MVC 风格。然而，我现在看到一些不想要的事情发生了。

我的表单有一个绑定到商店的组合框。使用模型数据填充表单后，存储被填充。

我的观点/形式

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'
                        }]
            }];
  }
});

我的控制器

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'
                });
    }
});

在我的 Chrome 网络窗口中，我可以看到商店请求稍后被触发。在更新表单之前如何加载商店有什么想法吗？我也想过在 afterRender 中做，但我认为即使这样也不能保证顺序。

【问题讨论】：

标签： javascript extjs extjs4 extjs-mvc

【解决方案1】：

似乎（加载）机制没有任何问题。组合框的 ID 字段的数据类型和作为设置的一部分的字段存在问题。整数与字符串。

这导致了问题。

【讨论】：

【解决方案2】：

我通过几种不同的方式解决了表单加载问题。

如果在整个应用程序中经常使用存储，我会在加载应用程序的早期加载存储，方法是使用Ext.getStore('my store name here') 查找它，然后在启动期间调用.load()。如果您希望商店或商店仅在您到达表单本身时加载，我会将组件的初始化挂钩在initComponent 中，然后您可以获得表单的字段，并且使用 for 循环可以遍历字段并初始化所有商店在表单组件访问服务器数据之前使用.load()。

这是我对您的 initComponent 方法的修改。我还没有调试过这段代码，但它应该很适合你。

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();
},

【讨论】：