自动填充Combobox ExtJS

时间:2017-11-24 13:00:39

标签: forms extjs combobox

我有一个在表单中有预定义值的组合框。它运行良好,但是当用户提交表单并使用以下命令重置时:

...
class LabelWidget(BoxLayout):

    def __init__(self, **kwargs):
        super(LabelWidget, self).__init__(**kwargs)
        self.Thetemp = None
        Clock.schedule_interval(self.getTheTemp, 1)

    def getTheTemp(self, dt):
        if self.Thetemp is None:
            self.thetemp =  labeltempmod.readtemp()
        else:
            self.thetemp =  labeltempmod.readtemp(self.theTemp)
        self.ids.TempLabel.text = str(self.thetemp)

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

我如何预先填充值:

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

用户当前需要做的是避免此错误,重新选择组合框中当前选择的内容。如果我得到以下问题之一,我觉得我可以避免这个问题:

A)如何正确制作预定义的组合框值,或

B)如何在没有收到此错误的情况下正确清除表单?

概要

目标:

  1. 需要清除表格(表格目前已清除)
  2. 需要预先填充组合框的值(形式目前填充可见的组合框)
  3. 问题:

    即使组合框在表单重置后选择了值,

    -cobobox也不会保持正确的值。

    抛出错误:

    “无法读取null的属性'0'

1 个答案:

答案 0 :(得分:2)

您在combobox配置中缺少 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