ExtJS表格布局不显示字段标签或添加填充

Question

我有一个表单,它有许多不同的领域,最终将成为一个动态的formPanel.

我选择了表格布局,因为它更容易布局组件,但由于某些原因,默认设置不适用,并且没有为任何字段显示字段标签.

我已经设置了如下配置:

SearchForm = Ext.extend(Ext.FormPanel, {
 id: 'myForm'
 ,title: 'Search Form'
 ,frame:true     
 ,waitMessage: 'Please wait.'
 ,labelWidth:80,
 buttonAlign:'center'
 ,initComponent: function() {    
     var config = {                 
        items: [{
            layout:{
                type:'table',
                columns:5
            },
            defaults:{
                //width:150,
                bodyStyle:'padding:20px'
            },               
                items:[{
                        xtype: 'label',
                        name: 'dateLabel',
                        cls: 'f',
                        text: "Required:"                   
                    },
                    {
                        xtype: 'datefield',
                        fieldLabel: "From Date",  
                        value: yesterday,
                        width: 110,
                        id: 'date1'                                             
                    },
                    {
                        xtype: 'datefield',
                        fieldLabel: "To Date",                      
                        id: 'date2',
                        width: 110,
                        value: yesterday                    

            },
            {
                xtype: 'displayfield', value: '  ',
                height:12,
                colspan:2
                }

            ],
            buttons: [{
                text: 'Submit',
                id: "submitBtn",                    
                handler: this.submit,
                scope: this

            },{
                text: 'Reset',
                id: "resetBtn",
                handler: this.reset,
                scope: this                     
            }
            ] 
        }]};

        // apply config
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);

        SearchForm.superclass.initComponent.apply(this, arguments);


    }


});

Answer 1

问题是因为您要定义布局table,因此ExtJS无法正确呈现字段标签.

在每列中,用a包裹字段Ext.Container并为面板指定布局form.这将告诉ExtJS正确渲染标签.