Textfelder im ExtJs Raster nicht wählbar

Question

Lief in ein interessantes Problem.

Ausgabe eines GridPanel mit einem benutzerdefinierten Render. Der Renderer gibt ein einfaches HTML-Eingabefeld aus, zur Laufzeit kann ich jedoch keinen Text in der Eingabe auswählen. Ich kann es bearbeiten, aber wenn ich innerhalb des Eingabefeldes klicken und ziehen müsste, wäre ich nicht in der Lage, den Text auszuwählen.

hier ist ein Auszug:

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

irgendwelche Ideen?

Answer 1

Das folgende CSS verhindert die visuelle Auswahl, obwohl "" Text ausgewählt ist.

.x-grid3-row td, .x-grid3-summary-row td {line-height: 13px; vertical-align: top; padding-left: 1px; padding-right: 1px; -moz-user-select: keine;}

ENTFERNEN "-moz-user-select: none;" um zu zeigen, dass der Text ausgewählt ist.

Answer 2

ExtJS hat eine eingebaute Lösung für dieses Problem, die Editable Grid. Er fungiert als reguläres Raster, bietet Ihnen jedoch die Möglichkeit, bestimmte Spalten editierbar zu machen. Sie können sogar nur bestimmte Zeilen in den Spalten bearbeiten, wenn Sie den Renderer überschreiben.

Answer 3

Versuchen zu setzen:

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

Ext.grid.GridDragZone Siehe für weitere Details über in-built Gitter Drag-and-Drop-Funktionen. Ich vermute, dass dies verhindert, dass Sie den Text in Ihren Eingaben auswählen.

Answer 4

Nur als Referenz: in die andere Richtung zu tun, dh. Machen Sie ein Element, das nicht durch Text auswählbar ist, verwenden Sie die Ext.Element unselectable() function, die in allen Browsern funktionieren soll.

Zum Beispiel würden Sie in einem Widget this.el.unselectable() anrufen.