Extjs 3.4组合框在选择后保持值格式答案

【问题标题】：Extjs 3.4 combobox keep value format after selectionExtjs 3.4组合框在选择后保持值格式
【发布时间】：2014-07-28 15:18:05
【问题描述】：

使用 Extjs 3.4 我有一个带有 tpl 配置的组合框：

var myCombo= new Ext.form.ComboBox(
    {
            typeAhead: true,
            triggerAction: 'all',
            store: myStore,
            valueField: 'value',
            displayField: 'desc',
            tpl: '<tpl for="."><div class="x-combo-list-item">{value} - {desc}</div></tpl>'
    });

当我单击组合时，value - decription 字符串正确显示。但是当我选择value - description 时，组合框只显示valueField。

从组合框中选择一行后是否可以保持 tpl 格式？

【问题讨论】：

标签： extjs combobox

【解决方案1】：

jcgarcia 是正确的，因为您不能为 TriggerField 元素中呈现文本的方式提供自定义模板。您唯一能做的就是通过将displayField 设置为某物来指定将要显示的 JSON 属性...

你有两个选择：

1/ 使用 jcgarcia 提议的事件。

2/ 一个更简单的解决方案是服务器可以发送一个带有信息的新属性来显示。

目前服务器在商店中返回了这个数据：

[{value:1, desc:'a'}, {value:2, desc:'b'}, ...]

// selecting a value would only display 'a'

让服务器将其返回给商店：

[{value:1, desc:'a', displayed:'1 - a'}, {value:2, desc:'b', displayed:'2 - b'},...]

然后改变

displayField: 'desc',

到

displayField: 'displayed',

这意味着您可能会传递一些数据两次，并且您将在服务器端渲染视图的一部分，因此它并不理想。但它很容易实现，而且这种权衡可能是值得的。

干杯

【讨论】：

使用 ExtJS 3.4.0 组件实现它的简单而好主意;)

【解决方案2】：

在 ExtJS 3.4.0 版本上是不可能的..

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-cfg-tpl

但是你可以使用beforeselect事件或者change事件手动修改...

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-event-beforeselect http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-event-change

在 ExtJS 4.1.1 上，您可以尝试使用以下内容：

var myCombo= new Ext.form.ComboBox(
    {
            typeAhead: true,
            triggerAction: 'all',
            store: myStore,
            valueField: 'value',
            displayField: 'desc',
            // Template for the dropdown menu.
            tpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<div class="x-boundlist-item">{value} - {desc}</div>', '</tpl>'),
            // template for the content inside text field
            displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{value} - {desc}', '</tpl>')
    });

这里有一些例子

http://try.sencha.com/extjs/4.1.1/docs/Ext.form.field.ComboBox.2/viewer.html

最好的问候，

【讨论】：