Как добавить гиперссылку строки для сетки extJS?

Question

Может ли кто-нибудь, пожалуйста, рассказать о том, как сделать гиперссылку в ячейках определенного столбца в ExtJS? Я попытался привязки столбца к визуализации функции в моих JS, из которого я отправить обратно HTML:

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

Однако с этим, проблема заключается в том, что после того, как я попал в контроллер через линии связи, навигация успешна, но последующие навигации к сетке данных обнаруживают только пустые записи.

Записи извлекаются из БД успешно через контроллер Spring MVC, который я проверил.

Обратите внимание, что это происходит только после того, как я использую гиперссылку строки в сетке extJS для перехода от сетки. Если я прихожу к сетке и перемещаюсь в другом месте и снова возвращаюсь в сетку, данные отображаются в порядке. Проблема возникает только в случае перехода от сетки, используя гиперссылку, отображаемую в одной или любой из ячеек.

Спасибо за помощь!

Answer 1

Я создал средство визуализации, чтобы оно выглядело так, как будто вы нажимали на него.

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

Но я использовал событие ячейки для управления щелчком.

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

Вместо использования тега привязки я, вероятно, использовал бы содержимое простой ячейки, чтобы выглядеть как якорь (используя базовый CSS), и обрабатывать событие GridPanel с для обработки этого действия. Это позволяет избежать использования поведения клика по умолчанию, связанного с якорем, при перезагрузке страницы (это то, что я предполагаю, происходит).

Answer 3

Для этих целей я использую плагин CellActions или RowActions в зависимости от того, что мне на самом деле нужно, и отрегулируйте его.

Если вы хотите что-то похожее на якорь, используйте вместо этого <span> и сделайте то, что предложил @bmoeskau.

Answer 4

Вы можете использовать функцию «renderer» для включения любого HTML-кода в ячейку.

Answer 5

Спасибо, ребята, за ваш ответ. Отправляя отладку скрипта extJS-all.js, я нашел проблему на стороне сервера.

В моем контроллере MVC Spring я устанавливал модель на сеанс, который в прецеденте, о котором я упоминал ранее, использовался для сброса «totalProperty» из Ext.data.XmlStore на 0 и, следовательно, последующих хитов на сетка, используемая для отображения пустых записей.

Это связано с тем, что сетка ext-JS проверяет значение «totalProperty», прежде чем оно даже выполняет итерацию через записи из DataStore. В моем случае у dataStore были данные, но размер был сброшен до нуля, и, следовательно, проблема возникла.

Спасибо всем за ваши данные!

Answer 6

Попробуйте что-то вроде этого:

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>'; 
      } 
     } 
       ... 
       ... 
       ... 

Однако свою благодарность - ExtJS Data Grid Column renderer to have multiple values

Answer 7

Это для ExtJS 4 и 5.

Используйте renderer, чтобы сделать содержимое выглядеть как ссылка:

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

Затем использовать недокументированные, динамически генерируемый View событие cellclick обработать щелчок:

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')); 
      } 
     } 
    } 
}