3

遇到一个有趣的问题。

输出带有自定义渲染的 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 + '">';}},
        ])
    })

有任何想法吗？

4

4 回答 4

3

下面的 CSS 阻止了视觉选择，尽管 "" 文本的行为被选中。

.x-grid3-row td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px; -moz 用户选择：无；}

删除“-moz-user-select:none;” 以显示已选择文本。

于 2009-06-15T13:29:35.203 回答
0

ExtJS 有一个针对这个问题的内置解决方案，可编辑网格。它充当常规网格，但为您提供了使某些列可编辑的选项。如果您覆盖渲染器，您甚至可以仅使列中的特定行可编辑。

于 2009-06-15T15:06:57.760 回答
0

尝试设置：

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

有关Ext.grid.GridDragZone内置网格拖放功能的更多详细信息，请参阅。我怀疑这会阻止您选择输入中的文本。

于 2009-06-15T17:33:44.380 回答
0

仅供参考：在不同的方向上做，即。使元素不可文本选择，使用应该适用于所有浏览器的Ext.Element unselectable() 函数。

例如，在您调用的小部件中this.el.unselectable()。

于 2009-09-01T11:20:08.563 回答