Textfields not selectable in ExtJs grid

Question

Ran into an interesting problem.

outputting a GridPanel with a custom render. The renderer outputs a basic html input field, at runtime however I cannot select text in the input. I can edit it, but if I had to click and drag inside the input box, I would not be able to select the text.

here's an 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 the visual selection, although "" text behaves selected.

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

REMOVE "-moz-user-select:none;" to show that text is selected.

Answer 2

ExtJS has a built in solution to this problem, the Editable Grid. It acts as a regular grid, but gives you the option of making certain columns editable. You can even make only specific rows within the columns editable if you override the renderer.

Answer 3

Try to set:

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

See Ext.grid.GridDragZone for more details on in-built grid drag-n-drop features. I suspect this prevents you from selecting the text in your inputs.

Answer 4

Just for reference: to do it in the different direction, ie. make an element non-text-selectable, use the Ext.Element unselectable() function that is supposed to work across all browsers.

For example, in a widget you'd call this.el.unselectable().