2

このExtJS Grid を詳細なパネルの例で自分のニーズに合わせて調整しました。

かなりうまく機能しますが、次の機能を追加したいと思います。

私のグリッドでは、フィールドの 1 つに非常に長いテキストが含まれている場合があります (これが私のストアからの取得方法です)。このフィールドの最初の N 文字のみを表示したいのですが、ユーザーが何かをしたとき (フィールドの上にカーソルを合わせる/クリックする/ダブルクリックする/...) にのみ、完全な値を表示したいと思います (多分窓か何かで）。

次のように、最初の N 文字のみを表示するレンダラーを定義することができました。

var my_grid = new Ext.grid.GridPanel({
    store: my_store,
    columns: [
        {header: "description", width: 400, dataIndex: 'description', sortable: true, 
            renderer: function(val, meta, record) {
            var tpl;
            if (val.length > 400) 
            {
                val = val.substr(0, 400) + '...';
            }
            tpl = new Ext.Template('<div style="white-space:normal; word-wrap: break-word;">{val}</div>');

            return tpl.apply(
            {
                val: val
            });
        }},

        {header: "some_other_column_header", width: 100, dataIndex: 'blah-blah',     sortable: true}
        ],
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    height:200,
    split: true,
    region: 'north'
});

私の質問は、ユーザーが何かをしたときにテキスト全体でウィンドウ/その他のオプションを追加する方法です。グリッドにリスナーを追加する必要があると思いますが、このリスナーの書き方がわかりません...

ありがとう！！！

4

2 に答える 2

4

テキストをセルに完全に表示するには:

.x-grid-cell-inner{
    white-space: normal!important;
}
于 2013-04-01T08:27:01.320 に答える
2

「cellclick」リスナーを追加してみてください

listeners : {   
    'cellclick' : function(grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex);  // Get the Record
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
        var data = record.get(fieldName);
        newWin(data);
    }
}

またはレンダラーからも実行できます

レンダラーで ext の省略記号関数を使用する 省略記号を参照

var rendererData = function(val,p,rec){
    return '<div onClick=javascript:newWin("'+escape(val)+'");>'+Ext.util.Format.ellipsis(val,50)+'</div>';
}

function newWin(val){
        new Ext.Window({
            height : 100,
            widht  : 100,
            title  : 'title',
            items  : [{xtye:'displayfield',html:val}]
        }).show();
    }
于 2012-04-05T11:58:08.770 に答える