Question

使用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格式？

Answer 1

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

最诚挚的问候，

Answer 2

jcgarcia是正确的，因为您无法在TriggerField元素中呈现文本的方式使用自定义模板。您唯一能做的就是通过将displayField设置为某个内容来指定将显示的JSON属性...

您有2个选项：

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组合框保持值格式

2 个答案: