自动填充组合框 ExtJS

Posted 2023-02-26

【中文标题】自动填充组合框 ExtJS

【英文标题】：Auto populate Combobox ExtJS

【发布时间】：2017-11-24 13:00:39

【问题描述】：

我的组合框在表单中具有预定义的值。它运作良好，但是当用户提交表单并且我使用以下方式进行重置时：

    this.getView().getForm().reset()

这会在大多数区域完美地重置表单，并且组合框会再次使用预定义的值重新填充，但是，如果您将值保留在新表单中并再次提交，您将收到 “无法读取属性 '0' of null" 错误

我如何预填充这些值：

       xtype: 'combobox',
        fieldLabel: '<span style="color: red; font-weight: bold;">*</span> <span style="font-weight: bold;">Are there any injuries or Fatalities?<span>',
        id: 'injuriesFatalities',
        labelWidth: 400,
        labelAlign: 'right',
        allowBlank: false,
        displayField: 'name',
        value: 'No',
        store: Ext.create('Ext.data.Store', 
            fields: ['name'],
            data: [ name: 'No' ,  name: 'Yes' ]
        )

为了避免这个错误，用户当前需要做的是重新选择当前在组合框中选择的内容。如果我回答以下问题之一，我觉得我可以避免这个问题：

A) 如何正确设置预定义的组合框值，或者

B) 如何正确清除表单而不会出现此错误？

概要

目标：

需要清除表单（当前清除表单） 需要预填充组合框的值（表单当前填充可见组合框）

问题：

-combobox's 实际上并不保存正确的值，即使组合框在表单重置后选择了值。

抛出错误：

“无法读取 null 的属性‘0’”

【参考方案1】：

您在组合框配置中缺少 valueField 配置。此外，您还需要在数据中指定指定的值字段。 您始终可以重复使用相同的字段，但最好将 displayField 和 valueField 保留为不同的键，以便轻松识别它们。

下面是一个例子：

Ext.application(
    name: 'Fiddle',

    launch: function () 

        var store = Ext.create("Ext.data.Store", 
            fields: ['name', 'age'],
            data: [
                name: 'Test1',
                age: 22,
                value: 'test1'
            , 
                name: 'Test2',
                age: 23,
                value: 'test2',
            , 
                name: 'Test3',
                age: 24,
                value: 'test3'
            ]
        );

        Ext.Viewport.add(
            xtype: 'panel',
            layout: 'fit',
            title: 'Form Exmaple',
            items: [
                xtype: 'formpanel',
                id: 'formId',
                items: [
                    xtype: 'combobox',
                    store: store,
                    displayField: 'name',
                    valueField: 'value',
                    value: 'test2'
                ],
                buttons: [
                    text: 'Reset',
                    handler: function(me) 
                        var form = Ext.getCmp('formId');
                        form.reset();
                    
                ]
            ]
        );
    
);

小提琴示例： https://fiddle.sencha.com/#view/editor&fiddle/2a2t

【讨论】：

感谢您的帮助，这是关于我如何选择 id 的另一个问题。我正在使用：damages.lastSelectedRecords[0].id;我需要做 damages.valueCollection.items[0].id