Issue in creating layout using table layout

[jainanuj82]

Hello,

I want to create table layout in my web page.
I have given columns value as 4, and i have added 8 items in the item list.
But now the second row is just touching the first row. Can i create some gap b/w the two?Below is my code:

 
{
     title: 'Other Model Impact',
     height: 100,
     id : 'otherModelImpactPanelId',
     layout: 'table',
     layoutConfig: {
            // The total column count must be specified here
            columns: 4
            
        },
          
       items : [
           { xtype: 'label',
        id : 'workAreaModelImpactLabel',
          cls: 'pcpLabel',
          text: 'Work Area' },
          
        { xtype: 'textfield',
          id: 'workAreaModelImpact',
          allowBlank: true,
          hidden:false
        },
       { xtype: 'label',
        id : 'equipmentModelModelImpactLabel',
        cls: 'pcpLabel',
        text: 'Equipment Model' },
       { xtype: 'textfield',
          id: 'equipmentModelModelImpact',
          allowBlank: true,
          hidden:false
        },
        { xtype: 'label',
        id : 'equipmentIdModelImpactLabel',
          cls: 'pcpLabel',
          text: 'Equipment Id' },
          
        { xtype: 'textfield',
          id: 'equipmentIdModelImpact',
          allowBlank: true,
          hidden:false
        },
       { xtype: 'label',
        id : 'eventNameModelImpactLabel',
        cls: 'pcpLabel',
        text: 'Event Name' },
       { xtype: 'textfield',
          id: 'eventNameModelImpact',
          allowBlank: true,
          hidden:false
        }
       
       ]  
     
    }

What is the best layout to use in this case, i can not use formlayout as i will different type of fields in form here.

Please suggest!

I have tried to set defaults:

 
defaults : {
     bodyStyle : 'padding:40px'
    },

But it does not do anything.

Please help!!

[jainanuj82]

Please reply someone!!!

I am blocked on this.. i am not able to create a good looking layout..