How to auto fit the row height and width in ext.js Panel?
<p>I have extended java script Panel with me that contains a a few columns. The data inside the column is received from the server. Some times the data from the server for each column is large and it does not fit inside the row. </p>

<p>Here is the code for the same:    </p>

<pre><code>Ext.define('DataDetailsGrid', {
    extend: 'Ext.grid.Panel',
    requires: [
        'DataStore'
    ],
    id: 'DataDetailsGrid',
    xtype: 'grid',
    margin: "20 20 20 20",
    nestedView: false,
    title: 'Student information',
    store: 'DataStore',
    frame: true,
    flex: 1,
    viewConfig : { 
        deferEmptyText: false,
        emptyText: 'No data Available'
    },
    columns: [
        { text: 'Id', flex: 0.5, dataIndex: 'id' },
        { text: 'Student name', flex: 1, dataIndex: 'student_name' },
        { text: 'Time Stamp', flex: 1, dataIndex: 'requestTimeStamp' },
        { text: 'email Id', flex: 1, dataIndex: 'emailId' },
        { text: 'About Students', flex: 4, dataIndex: 'response' },
    ]
});
</code></pre>

<p>The issue is with <strong>About Students</strong> which can be about 500 characters sometimes. This is not getting accommodated inside the given row.</p>