Текстовые поля не выбираются в сетке 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-row-td, .x-grid3-summary-row TD {высота строки: 13px; вертикальные выравнивания: сверху; обивка-слева: 1px; обивка-направо: 1px; * +1004 * -moz-пользователь выбор: нет; }

REMOVE "-moz-user-select: none;" чтобы показать, что текст выделен.

Answer 2

Только для справки: сделать это в другом направлении, т.е. сделайте элемент не для выбора текста, используйте функцию Ext.Element unselectable () , которая должна работать во всех браузерах.

Например, в виджете вы бы назвали this.el.unselectable().

Answer 3

Попробуйте установить:

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

См. Ext.grid.GridDragZone для получения дополнительной информации о встроенных функциях перетаскивания сетки. Я подозреваю, что это мешает вам выбирать текст в ваших вводах.

Answer 4

ExtJS имеет встроенное решение этой проблемы, Editable Grid . Он действует как обычная сетка, но дает вам возможность сделать некоторые столбцы редактируемыми. Вы даже можете сделать редактируемыми только определенные строки в столбцах, если переопределите средство визуализации.