Làm thế nào để thêm một siêu liên kết hàng cho một lưới extJS?

Question

Ai đó có thể vui lòng ném một số ánh sáng về cách làm thế nào để đi về rendering một siêu liên kết trong các tế bào của một cột cụ thể trong ExtJS? Tôi đã cố gắng liên kết các cột để một chức năng render trong JS của tôi, từ đó tôi gửi lại html:

<a href="ControllerName/viewName">SELECT</a> 

Tuy nhiên, với điều này, vấn đề là, một khi tôi nhấn điều khiển thông qua việc liên kết, điều hướng thành công, nhưng các điều hướng tiếp theo đến lưới dữ liệu chỉ hiển thị các bản ghi trống.

Các bản ghi được lấy từ DB thành công thông qua bộ điều khiển Spring MVC, tôi đã kiểm tra.

Xin lưu ý rằng điều này chỉ xảy ra khi tôi sử dụng liên kết hàng trong lưới extJS để điều hướng khỏi lưới. Nếu tôi đến lưới, và điều hướng ở nơi khác và một lần nữa trở lại lưới, dữ liệu được hiển thị tốt. Sự cố chỉ xảy ra trong trường hợp điều hướng khỏi lưới, sử dụng siêu liên kết được hiển thị trong một/bất kỳ ô nào.

Cảm ơn sự giúp đỡ của bạn!

Answer 1

Tôi đã tạo trình kết xuất sao cho có vẻ như bạn đang nhấp vào nó.

aRenderer: function (val, metaData, record, rowIndex, colIndex, store){ 
// Using CellClick to invoke 
return "<a>View</a>"; 
}, 

Nhưng tôi đã sử dụng sự kiện ô để quản lý nhấp chuột.

cellclick: { 
    fn: function (o, idx, column, e) { 
     if (column == 1) // Doesn't prevent the user from moving the column 
     { 
      var store = o.getStore(); 
      var record = store.getAt(idx); 
      // Do work 
     } 
    } 
} 

Answer 2

Thay vì sử dụng thẻ neo, tôi có thể sử dụng nội dung ô được đồng bộ để trông giống như một neo (sử dụng CSS cơ bản) và xử lý sự kiện cellclick của GridPanel để xử lý tác vụ. Điều này tránh đối phó với hành vi nhấp chuột mặc định của neo tải lại trang (đó là những gì tôi giả định đang xảy ra).

Answer 3

Vì những mục đích này, tôi sử dụng CellActions hoặc RowActions plugin tùy thuộc vào những gì tôi thực sự cần và xử lý lần nhấp qua ô.

Nếu bạn muốn một cái gì đó trông giống như một cái neo, hãy sử dụng <span> thay vào đó và làm những gì @bmoeskau đề xuất.

Answer 4

Bạn có thể sử dụng chức năng 'trình kết xuất' để bao gồm bất kỳ HTML nào bạn muốn vào ô.

Answer 5

Cảm ơn các bạn đã trả lời. AFter gỡ lỗi tập lệnh extJS-all.js, tôi thấy vấn đề ở phía máy chủ.

Trong bộ điều khiển MVC Spring, tôi đã đặt mô hình thành phiên, trong trường hợp sử dụng tôi đã đề cập trước đó, được sử dụng để đặt lại "totalProperty" của Ext.data.XmlStore thành 0 và do đó các lần truy cập tiếp theo lưới, được sử dụng để hiển thị các bản ghi trống.

Điều này là do, lưới ngoài JS, kiểm tra giá trị "totalProperty", trước khi nó lặp lại thông qua các bản ghi từ dataStore. Trong trường hợp của tôi, dataStore có dữ liệu, nhưng kích thước được đặt lại thành null và do đó vấn đề xuất hiện.

Xin cảm ơn tất cả vì những yếu tố đầu vào của bạn!

Answer 6

Hãy thử một cái gì đó như thế này:

Ext.define('Names', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { type: 'string', name: 'Id' }, 
     { type: 'string', name: 'Link' }, 
     { type: 'string', name: 'Name' } 
    ] 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    columns: [ 
     { 
      text: 'Id', 
      dataIndex: 'Id' 
     }, 
     { 
      text: 'Name', 
      dataIndex: 'Name', 
      renderer: function (val, meta, record) { 
       return '<a href="' + record.data.Link + '">' + val + '</a>'; 
      } 
     } 
       ... 
       ... 
       ... 

Tuy nhiên nhờ tôi - ExtJS Data Grid Column renderer to have multiple values

Answer 7

này là dành cho ExtJS 4 và 5.

Sử dụng một renderer để làm cho nội dung trông giống như một liên kết:

renderer: function (value) { 
    return '<a href="#">'+value+'</a>'; 
} 

Sau đó sử dụng không có giấy tờ, tạo động View kiện cellclick để xử lý nhấp chuột:

viewConfig: { 
    listeners: { 
     cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) { 

      var linkClicked = (e.target.tagName == 'A'); 
      var clickedDataIndex = 
       view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex; 

      if (linkClicked && clickedDataIndex == '...') { 
       alert(record.get('id')); 
      } 
     } 
    } 
}