ExtJS 5 组合框 - 提交值和文本

Posted 2023-02-26

【中文标题】ExtJS 5 组合框 - 提交值和文本

【英文标题】：ExtJS 5 combobox - submitting both value and text

【发布时间】：2015-08-15 16:57:57

【问题描述】：

我试图在 ExtJS 5 中获得一个简单的组合框来提交所选元素的值和文本。从我读过的所有内容来看，如果我为组合包含 hiddenName 属性，这似乎应该可以工作，但我无法让它同时提交。

这里是相关的组合框配置：

                  name: 'myCombo',
                  hiddenName: 'myComboId',
                  submitValue: true,
                  xtype: 'combo',
                  queryMode:'local',
                  valueField: 'id',
                  displayField: 'state',

这里是一个 jsFiddle，所有这些都设置好了：fiddle

如果您在提交表单时在 firebug/chrome 调试器中查看对我的假网址的请求，您会看到只有“myCombo”被提交，而我也期待“myComboId”。

任何帮助将不胜感激，谢谢。

【问题讨论】：

想知道你为什么需要它。无论如何，服务器端都会知道该文本由该值标识，不是吗？

这是一个可编辑的组合框，因此用户可以在组合框中键入一个服务器端不知道且没有与之关联的 ID 的新值。我希望同时提交 ID 和文本，以便我可以先检查 ID，如果它是空白的，我知道用户已经提交了一个新值，那么我可以获取文本并将其作为新值添加到数据库。我的印象是 hiddenName 属性允许你这样做。

我明白了。现在看，你的小提琴目前正在为新创建的条目提交myCombo=newtext，为现有的条目提交myCombo=<ID>。为什么不让服务器端看到，每当到达的值不是现有 ID 时，它必须是要添加到数据库的新文本值？

当然，但是如果他们输入一个新的数字值呢？然后，服务器可能会错误地将新文本值与现有 ID 匹配。我的意思是，是的，我可以使用一种解决方法来完成这项工作。但我想使用 hiddenName，因为我认为这就是它的用途......也许我错了。

hiddenName 的目的对我来说还不是很清楚。我不明白为什么你认为它会如你所愿。为了完成您的任务，我将使用组合商店并通过代理保存在其中创建的任何新 记录 — 而不是提交表单和处理隐藏字段。

【参考方案1】：

我会选择一个隐藏字段并在选择组合框时将隐藏字段的值归档。

xtype: 'form',
url: 'fakeurl',
scrollable: true,
defaultType: 'textfield',
defaults: 
    fieldLabel: 'some field'
,
items: [
    name: 'myCombo',
    //hiddenName: 'myComboId',
    xtype: 'combo',
    queryMode:'local',
    valueField: 'id',
    displayField: 'state',
    store: 
        model: 'KitchenSink.model.State',
        data: [
            [0, 'AL', 'Alabama', 'The Heart of Dixie'],
            [1, 'AK', 'Alaska', 'The Land of the Midnight Sun'],
            [2, 'AZ', 'Arizona', 'The Grand Canyon State']
        ]
    ,
    listeners: 
        select: function(combo, record, eOpts) 
            var hiddenField = combo.up('form').down('textfield[name=myComboValue]');

            hiddenField.setValue(record.get('abbr'));
        
    
, 
    name: 'myComboValue',
    hidden: true,
    hiddenName: 'myComboValue'
],
buttons: [
    text:'Submit',
    handler: function(btn)
        btn.up('form').getForm().submit();
    
]

【讨论】：

当然可以。但据我了解，这是 hiddenName 属性应该提供的，所以我想知道为什么它不起作用