Ext.form.field.ComboBox 显示说明答案

【问题标题】：Ext.form.field.ComboBox show DescriptionExt.form.field.ComboBox 显示说明
【发布时间】：2018-02-20 22:58:23
【问题描述】：

我将下面的代码用于 10 个字段，但我想让我的 5 个字段显示（缩写 - 名称），另一个只显示（缩写）我如何达到这个目标。注意：此代码来自http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.form.field.ComboBox

提前致谢，

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    // Template for the dropdown menu.
    // Note the use of "x-boundlist-item" class,
    // this is required to make the items selectable.
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<div class="x-boundlist-item">{abbr} - {name}</div>',
        '</tpl>'
    ),
    // template for the content inside text field
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '{abbr} - {name}',
        '</tpl>'
    )
});

【问题讨论】：

你应该如何确定哪些项目显示哪些显示值？

标签： javascript extjs extjs4.1

【解决方案1】：

一种可能的方法是使用Ext.XTemplate。以下工作示例根据条件以不同方式显示前两项。

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.FocusManager.enable();

        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data : [
                {"abbr":"AL", "name":"Alabama"},
                {"abbr":"AK", "name":"Alaska"},
                {"abbr":"AZ", "name":"Arizona"}
            ]           
        });

        var template = Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '<div class="x-boundlist-item">',
                    '<tpl if="xindex<=2">',
                    '{abbr}',
                    '<tpl else >',
                    '{abbr} - {name}',
                    '</tpl>',
                '</div>',
            '</tpl>'
        );

        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            renderTo: Ext.getBody(),
            tpl: template
        });     

    });
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>

【讨论】：