Question

进入一个有趣的问题。

使用自定义渲染输出GridPanel。渲染器在运行时输出基本的html输入字段但是我无法在输入中选择文本。我可以编辑它，但如果我必须在输入框内单击并拖动，我将无法选择文本。

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

任何想法？

Answer 1

以下CSS会阻止视觉选择，尽管“”文本的行为已被选中。

.x-grid3-row td，.x-grid3-summary-row TD {行高：13像素;垂直对齐：顶部;填充左：1px的;填充右：1px的;的 -moz-用户选择：无; }

删除“-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()。

在ExtJs网格中无法选择文本字段

4 个答案: