Ext.form.field.ComboBox显示说明

时间:2018-02-20 22:58:24

标签: javascript extjs extjs4.1

我在10个字段中使用下面的代码,但我想让我的5个字段显示(abbr - name),而另一个只显示(abbr)我如何达到这个目标。 注意:此代码来自http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.form.field.ComboBox

提前致谢,

itertools.accumulate()

1 个答案:

答案 0 :(得分:0)

这是一个有效的例子。根据条件,前两项显示不同。

文档为here

<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>