ExtJsグリッドでテキストフィールドを選択できない

Question

興味深い問題があります。

カスタムレンダリングでGridPanelを出力します。レンダラーは基本的なHTML入力フィールドを出力しますが、実行時には入力でテキストを選択できません。私はそれを編集することができますが、入力ボックス内をクリックしてドラッグしなければならない場合、テキストを選択することはできません。

tsGrid = new Ext.grid.GridPanel({ 
     id   : 'gridTimes', 
     store  : gridStore, 
     border  : false, 
     deletedLineIDs : [], 
     viewConfig : { 
      forceFit : true 
     }, 
     plugins  : [ 
      actionColumn 
     ], 
     cm   : new Ext.grid.ColumnModel([ 
      {id:'client',header: "client", width: 40, sortable: true, dataIndex: 'client'}, 
      {header: "product", width: 20, sortable: true, dataIndex: 'product'}, 
      {header: "job", width: 20, sortable: true, dataIndex: 'job'}, 
      {header: "task", width: 20, sortable: true, dataIndex: 'task'}, 
      {header: "notes", width: 20, sortable: true, dataIndex: 'notes'}, 
      {header: "cancomplete", width: 20, sortable: true, dataIndex: 'cancomplete'}, 
      {header: "Monday", width: 20, sortable: true, dataIndex: '0', cls : 'suppresspadding mon',renderer : function(v, p, record){return '<input tsid="' + record.id + '" class="x-form-field x-form-text" unselectable="off" onFocus="this.select()" value="' + v + '">';}}, 
      {header: "Tuesday", width: 20, sortable: true, dataIndex: '1', cls : 'suppresspadding tue',renderer : function(v, p, record){return '<input tsid="' + record.id + '" class="x-form-field x-form-text" onFocus="this.select()" value="' + v + '">';}}, 
      {header: "Wednesday", width: 20, sortable: true, dataIndex: '2', cls : 'suppresspadding wed',renderer : function(v, p, record){return '<input tsid="' + record.id + '" class="x-form-field x-form-text" onFocus="this.select()" value="' + v + '">';}}, 
     ]) 
    }) 

任意のアイデア：

ここに抜粋ですか？

Answer 1

次のCSSでは、テキストが選択されて動作しますが、視覚的な選択はできません。

.X-GRID3行TD、.X-GRID3サマリー列 TD {行の高さ：13px;垂直整列：トップ;パディング左：1ピクセル;パディング右：1ピクセル。 -moz-user-select：none;}

REMOVE "-moz-user-select：none;"テキストが選択されていることを示します。

Answer 2

ExtJSには、この問題の解決策であるEditable Gridが組み込まれています。これは通常のグリッドとして機能しますが、特定の列を編集可能にするオプションを提供します。レンダラーをオーバーライドすると、編集可能な列内の特定の行のみを作成することもできます。

Answer 3

は設定してください：

tsGrid.getView().dragZone = null; (or empty object) 

は、内蔵のグリッドドラッグアンドドロップ機能の詳細についてはExt.grid.GridDragZoneを参照してください。私はあなたの入力の中のテキストを選択できないと思う。

Answer 4

ちょうど参照のために：別の方向、すなわちそれを行うには。要素をテキストで選択できないようにするには、すべてのブラウザで動作するはずのExt.Element unselectable() functionを使用します。

例えば、ウィジェットではthis.el.unselectable()と呼んでいます。