Question

我注意到有很多方法可以用数据填充表单。我想做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中做这件事，但我认为即使这样，订单也无法保证。

Answer 1

看来（加载）机制没有任何错误。 Combobox的ID字段的数据类型和作为设置一部分的字段存在问题。 Int vs String。

这导致了这个问题。

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

使用Model数据更新表单后，Combobox存储加载

2 个答案: