ExtJS GridPanelで超長フィールドを表示する方法

Question

私はこれを私のニーズに合わせて調整しました。 （これはそれが私の店から取得される方法です）分野の一つは、非常に長いテキストを含むことができ、私のグリッドで

：

それはかなりうまく動作しますが、今、私は、この機能を追加したいと思います。私は、このフィールドの最初の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' 
}); 

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

ありがとう!!!

Answer 1

レンダラ でも '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の

利用省略記号機能は完全にテキストを表示するにはellipsis

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(); 
    } 

Answer 2

を参照してください。セル内：

.x-grid-cell-inner{ 
    white-space: normal!important; 
}