Text fields not selectable in ExtJs grid

Question

We turn to an interesting problem.

GridPanel output using custom rendering. The renderer displays the main html input field at runtime, however I cannot select the text in the input file. I can edit it, but if I needed to click and drag into the input field, I would not be able to select the text.

here exerpt:

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

any ideas?

Answer 1

The following CSS prevents visual selection, although the text "behaves correctly."

.x-grid3-row td, .x-grid3-summary-row TD {row height: 13px; vertical alignment: top; Upholstery-left: 1px; padding to the right: 1px; -moz-user choice: no; }

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(), .

, this.el.unselectable().