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

Question

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

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

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

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

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

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

Answer 1

Это для ExtJS 4 и 5.

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

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

Затем используйте недокументированное, динамически генерируемое Просмотр событие 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'));
            }
        }
    }
}

Answer 2

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

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 Столбец рендеринга столбцов, чтобы иметь несколько значений

Answer 3

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

Answer 4

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

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 5

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

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

Answer 6

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

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

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

Еще раз спасибо всем за ваш ввод!

Answer 7

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