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

問題は、約500文字時々することができ学生についてです。これは、指定された行の内部に収められていません。

Answer 1

このcssコードは、Adout Students Dataのラップに使用できます。
チェックフィドル：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 }