Làm cho nội dung lưới ExtJS 4 có thể chọn

Question

Lưới trong ExtJS 4 (Sencha) không cho phép chọn nội dung theo mặc định. Nhưng tôi muốn làm điều này có thể.

Tôi đã thử lưới này cấu hình:

viewConfig: { 
    disableSelection: true, 
    stripeRows: false, 
    getRowClass: function(record, rowIndex, rowParams, store){ 
     return "x-selectable"; 
    } 
}, 

với các lớp css (về cơ bản hướng đến mọi yếu tố tôi có thể nhìn thấy trong Chrome):

/* allow grid text selection in Firefox and WebKit based browsers */ 

.x-selectable, 
.x-selectable * { 
       -moz-user-select: text !important; 
       -khtml-user-select: text !important; 
    -webkit-user-select: text !important; 
} 

.x-grid-row td, 
.x-grid-summary-row td, 
.x-grid-cell-text, 
.x-grid-hd-text, 
.x-grid-hd, 
.x-grid-row, 

.x-grid-row, 
.x-grid-cell, 
.x-unselectable 
{ 
    -moz-user-select: text !important; 
    -khtml-user-select: text !important; 
    -webkit-user-select: text !important; 
} 

Tôi biết rằng bạn có thể ghi đè lên lưới hàng mẫu trong Ext 3 như dưới đây, nhưng tôi không biết làm thế nào để làm tương tự trong Ext 4:

templates: { 
    cell: new Ext.Template(
    '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>', 
      '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', 
    '</td>' 
    ) 
} 

Any su ggestions nhiều đánh giá cao.

Answer 1

Bạn có thể thêm nó như thế này, sử dụng renderer cho cột

columns: [ 
    { 
     header: "", 
     dataIndex: "id", 
     renderer: function (value, metaData, record, rowIndex, colIndex, store) { 
      return this.self.tpl.applyTemplate(record.data); 
     }, 
     flex: 1 
    } 
], 
statics: { 
    tpl: new Ext.XTemplate(
     '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>', 
      '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', 
     '</td>') 
} 

Answer 2

Một cách khác để làm điều đó có thể là để gán các lớp đến các yếu tố html tùy ý trong khi sử dụng mới templatecolumn. Dưới đây là một cột trong định nghĩa cột mà tôi vừa viết trong khi chuyển một ứng dụng sang extjs4.

{ 
    text: "Notes", 
    dataIndex: 'notes', 
    width: 300,  
    xtype: 'templatecolumn', 
    tpl: [ 
    '<span class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"', 
    'style="{style}" tabIndex="0" {cellAttr}>', 
    '<span class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{notes}', 
    '</span></span>' ], 
    editor: {xtype:'textfield'} 
} 

Answer 3

Bạn có thể thêm enableTextSelection: true để viewConfig bạn hoặc áp dụng sự thay đổi trên toàn cầu cho mỗi lưới với điều này:

Ext.override(Ext.grid.View, { enableTextSelection: true }); 

Answer 4

Tôi chỉ muốn thêm vào Triquis trả lời: Với ExtJS 4.1.0 bạn cũng có thể bật lựa chọn cho treepanels:

Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels 

Ext.override(Ext.grid.View, { enableTextSelection: true }); // Grids 

Đặt mã này ở đâu đó trong hàm Ext.onReady() hoặc sớm trong ứng dụng của bạn.

(Xin lỗi, tôi không thể để viết bình luận cho câu trả lời của Triqui như tôi không có uy tín cần được nêu ra.)

Answer 5

Đối với phiên bản cũ của ExtJS rằng doesnot hỗ trợ cho phép lựa chọn văn bản. Sau đây sẽ làm việc bằng cách gán một mẫu mới cho ô lưới. Tính năng này hoạt động cho EXTJS 3.4.0

var grid = new Ext.grid.GridPanel({ 
    viewConfig: { 
     templates: { 
     cell: new Ext.Template(
      '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id}\ 
         x-selectable {css}" style="{style}"\ 
         tabIndex="0" {cellAttr}>',\ 
      '<div class="x-grid3-cell-inner x-grid3-col-{id}"\ 
         {attr}>{value}</div>',\ 
      '</td>' 
     ) 
     } 
    }, 
}); 

Answer 6

Kết hợp một số câu trả lời này theo cách tối ưu nhất .... Đặt enableTextSelection thành true trong chế độ xem lưới khi tạo lưới.

var grid = new Ext.grid.GridPanel({ 
    viewConfig: { 
     enableTextSelection: true 
    }, 
}); 

Answer 7

bạn có thể bật các lựa chọn cho xem lưới với những vài dòng mã, nó hoạt động rất tốt trong ExtJS 3.4, với IE 11 và chế độ tương thích

if (!Ext.grid.GridView.prototype.templates) { 
Ext.grid.GridView.prototype.templates = {}; 
} 
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>', 
'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', 
'</td>' 
);