Base ExtJS fiddle

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/examples/shared/examples.css">
<p>Textarea resizing test<br/>
    http://stackoverflow.com/questions/5269559/change-textbox-to-textarea-on-click</p>

CSS

body { padding: 20px }

JavaScript

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' ,a:'',b,''},
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' ,a:'',b,''},
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244',a:'',b,'' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' ,a:'',b,''}
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' ,flex: 1},
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phonxe', dataIndex: 'phone' },
        { text: 'Phone',flex: 4,columns:[
            
               { text: 'Name', dataIndex: 'a' },
        { text: 'Email', dataIndex: 'b' },
            ] }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});