Combobox在ExtJS中显示为输入框

时间:2014-02-07 09:50:05

标签: combobox extjs4

我是ExtJS的新手,我正在尝试在面板内显示组合框,但是在下面添加代码输入框即将进入组合项目。 这是代码

{
    xtype: 'combobox',
    fieldLabel: 'Rating',
    name: 'rating',
    store: [['1', '4']],
    id: 'test',
    forceSelection: false,
    editable: true,
    typeAhead: true,
    selectOnFocus: true
},

感谢您的回答,但仍然无法正常工作,我不确定错误在哪里。 请帮助我已经浪费了一天这个

<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ext-all.css" />
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ext-base.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ext-all.js"></script>


<title>Insert title here</title>
<head>
<title>Search Box Example 1</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- CSS styles for standard search box -->
</head>
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
// some data used in the examples

/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally

    var fs = new Ext.FormPanel({
        frame: true,
        title:'XML Form',
        labelAlign: 'right',
        labelWidth: 85,
        width:340,
        waitMsgTarget: true,

        // configure how to read the XML Data
        // reusable eror reader class defined at the end of this file
        items: [
            new Ext.form.FieldSet({
                title: 'Contact Information',
                autoHeight: true,
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        width:190
                    }, {
                        fieldLabel: 'Last Name',
                        name: 'last',
                        width:190
                    }, {
                        fieldLabel: 'Company',
                        name: 'company',
                        width:190
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        width:190
                    },

                    new Ext.form.ComboBox({
                        fieldLabel: 'State',
                        hiddenName:'state',
                        store: ['1', '4'],
                        valueField:'abbr',
                        displayField:'state',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a state...',
                        selectOnFocus:true,
                        width:190
                    }),

                    new Ext.form.DateField({
                        fieldLabel: 'Date of Birth',
                        name: 'dob',
                        width:190,
                        allowBlank:false
                    })
                ]
            })
        ]
    });

    // simple button add


    // explicit add
      fs.render('form-ct');

    fs.on({
        actioncomplete: function(form, action){
            if(action.type == 'load'){
                submit.enable();
            }
        }
    });

});

</script> 

<div id="form-ct"></div>

</body>
</html>

1 个答案:

答案 0 :(得分:2)

store数组data是双嵌套的,而应该是['1','4']。所以只显示了一个选项。 I made a fiddle to demonstrate the combobox working