css - 如何在 ext.js 面板中自动调整行高和宽度？

Question

我已经扩展了 Java 脚本面板，其中包含几列。列中的数据是从服务器接收的。有时，来自服务器的每列数据都很大，无法放入行中。

下面是相同的代码:

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' },
    ]
});

问题出在 About Students 上，有时可能会包含大约 500 个字符。这没有被容纳在给定的行内。

Answer 1

您可以使用此 css 代码来包装 Adout 学生数据。
检查 fiddle :https://fiddle.sencha.com/#fiddle/1i3g

.x-grid-cell-inner {
 white-space: initial;
}