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

问题在于关于学生，有时可能约为500个字符。这不会被容纳在给定的行中。

Answer 1

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

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

Answer 2

您需要做的就是在column的定义中添加以下行

cellWrap: true

检查这个小提琴：https://fiddle.sencha.com/#fiddle/1i5o 。我冒昧地分担了Ajay Thakur的小提琴。

因此，在您的情况下，将您的违规代码更改为以下行：

{ text: 'About Students', flex: 4, dataIndex: 'response', cellWrap: true }

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

2 个答案: