ExtJS Table Layout not displaying fieldlabels or adding padding

I have a form which has a number of different fields and ultimately will become a dynamic formPanel.

I've opted for the table layout since it's easier to lay out the components but for some reason, the defaults settings are not applying and no field Labels are being disp开发者_开发百科layed for any fields.

I've set out the configuration like:

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


    }


});

The problem is because you're defining the layout to be table, hence ExtJS not rendering the labels of fields correctly.

In each column, wrap your fields with an Ext.Container and give the panel a layout of form. That will tell ExtJS to render the labels correctly.