web-dev-qa-db-ja.com

Ext JSのワードラップグリッドセル

（これ自体は問題ではありません。ExtJS 3.1.0を使用して見つけたソリューションを文書化しています。しかし、より良いソリューションを知っている場合は、お気軽に回答してください！）

Ext JSグリッドオブジェクトの列構成には、Wordでラップされたテキストを許可するネイティブな方法はありませんが、グリッドによって作成されたcss要素のインラインCSSをオーバーライドするTDプロパティがあります。

残念ながら、TD要素にはコンテンツをラップするDIV要素が含まれており、そのDIVはExt JSのスタイルシートによって_white-space:nowrap_に設定されているため、TD CSSをオーバーライドしても効果がありません。

次のコードをメインのCSSファイルに追加しました。グリッドの機能を壊さないようにappearsを簡単に修正しましたが、TDに適用する_white-space_設定を許可していますDIVにパススルーします。

_.x-grid3-cell {
    /* TD is defaulted to Word-wrap. Turn it off so
       it can be turned on for specific columns. */
    white-space:nowrap;
    }

.x-grid3-cell-inner {
    /* Inherit DIV's white-space from TD parent, since
       DIV's inline style is not accessible in the column
       definition. */
    white-space:inherit;
    }
_

YMMVは機能しますが、Interwebsを検索しても機能する解決策が見つからなかったため、解決策として入手したいと考えていました。

extjsgridword-wrap
29
richardtallent

「より良い解決策」ではなく、同様の解決策です。私は最近、すべてのグリッドのすべてのセルを折り返すことを許可する必要がありました。私は同様のCSSベースの修正を使用しました（これはExt JS 2.2.1用でした）：

.x-grid3-cell-inner, .x-grid3-hd-inner {
  white-space: normal; /* changed from nowrap */
}

私はtdにスタイルを設定することを気にしませんでした、私はセルクラスにちょうど行きました。

18
Jonathan Julian

1つの列にのみラッピングを適用する場合は、カスタムレンダラーを追加できます。

追加する関数は次のとおりです。

function columnWrap(val){
    return '<div style="white-space:normal !important;">'+ val +'</div>';
}

次に、ラップする各列にrenderer: columnWrapを追加します

new Ext.grid.GridPanel({
[...],
columns:[{   
     id: 'someID',
     header: "someHeader",
     dataIndex: 'someID',
     hidden: false,
     sortable: true,
     renderer: columnWrap           
}]
74
Jack Kleinman

特定の列でテキストをラップするだけで、ExtJS 4を使用している場合は、列のセルにCSSクラスを指定できます。

{
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

そしてあなたのCSSファイルで：

.wrap .x-grid-cell-inner {
    white-space: normal;
}
13
CTarczon

他の解決策はそれです：

columns : [
    {
        header: 'Header',
        dataIndex : 'text',
        renderer: function(value, metaData, record, rowIndex, colIndex, view) {
            metaData.style = "white-space: normal;";
            return value;
        }
    }
]
4
Tiago Sippert

使用する

cellWrap: true

それでもcssを使用したい場合は、常にテーマ内のUI、変数などを操作するか、styleプロパティでスタイルを設定してください。

1
Tarabass

最善の方法は、以下のようにcellWrapをtrueに設定することです。

cellWrap：true

EXTJS 5.0でうまく機能します。

1
Augustine Joseph